前言:
虽然使用vue只有一般都会使用store
作为数据存储的工具,但是前端基本的数据存储在一些时候还是挺好用的,总结一下基本用法
一、基本知识
- localStorage和sessionStorage
这两个属性都代表同一个Storage对象 – 一个持久化关联数组,数组使用字符串来索引,存储的值也都是字符串形式。
两者的区别在于存储的有效期和作用域的不同
通过localStorage
存储的数据是永久性的,除非Web应用刻意删除存储的数据,或者用户通过设置浏览器配置(浏览器提供的特定UI)来删除,否则数据将一直存储在用户电脑,永不过期。
localStorage
的作用域 是限定在文档源(通过协议、主机名以及端口三者确定),同源的文档间共享同样的localStorage数据,可以互相读取对方的数据,甚至可以覆盖对方的数据。
非同源的文档间互相都不能读取或者覆盖对方的数据。
localStorage
的作用域同样受浏览器供应商限制。
SessionStorage
的有效期和存储数据的脚本所在的最顶层的窗口或者浏览器标签页是一样的。一旦窗口或者标签页被永久关闭了,那么所有通过SessionStorage
存储的数据也都被删除。
SessionStorage
的作用域也限定在文档源中,同时还被限定在窗口中。
- cookie
cookie
除了名和值,还有一些可选的属性来控制cookie
的有效期和作用域
cookie
默认的有效期很短,如果想延长,可以通过设置max-age
属性(单位s)
cookie
的作用域是通过文档源和文档路径来确定,可通过设置cookie的path
属性,来确定路径
二、相关方法
- localStorage
新建localStorage
const localStorageSet = (key, value) => {
if (!key) return
if (typeof value !== 'string') {
value = JSON.stringfy(value)
}
window.localStorage.setItem(key, value)
}
export default localStorageSet
获取localStorage
const localStorageGet = (key) => {
if (!key) return;
return window.localStorage.getItem(key)
}
export default localStorageGet
删除localStorage
const localStorageRemove = (key) => {
if (!key) return;
window.localStorage.removeItem(key)
}
export default localStorageRemove
- sessionStorage
新建sessionStorage
const sessionStorageSet = (key, value) => {
if (!key) return;
if (typeof value !== 'string') {
value = JSON.stringify(value)
}
window.sessionStorage.setItem(key, value)
}
export default sessionStorageSet
获取sessionStorage
const sessionStorageGet = (key) => {
if(!key) return;
return window.sessionStorage.getItem(key)
}
export default sessionStorageGet
删除sessionStorage
const sessionStorageRemove = (key) => {
if (!key) return;
window, sessionStorage.removeItem(key)
}
export default sessionStorageRemove
- cookie
新建cookie
const setCookie = (key, value, expire) => {
const d = new Date()
d.setDate(d.getDate() + expire)
document.cookie = `${
key}=${
value};expires=${
d.toUTCString()}`
}
export default setCookie
获取cookie
const getCookie = (key) => {
const cookieStr = decodeURIComponent(document.cookie)
const arr = cookieStr.split('; ')
let cookieValue = ''
for (let i = 0; i < arr.length; i++) {
const temp = arr[i].split('=')
if (temp[0] === key) {
cookieValue = temp[1]
break
}
}
return cookieValue
}
export default getCookie
删除cookie
const delCookie = (key) => {
document.cookie = `${
encodeURIComponent(key)}=;expires=${
new Date()}`
}
export default delCookie
三、查看方法
application中可以查看到相关信息
四、参考文献
【1】JavaScript权威指南
【2】https://mp.weixin.qq.com/s/aU2LMBB9KJTinyIAybuzLg