一、cookie
存储在浏览器缓存的信息,一般用于记录用户登陆信息,最大存储量为4KB,可以自由设置过期时间,具有不可跨域性。
cookie 使用实例:
function setCookie(data) {
// 设置一个具体的日期作为过期时间
let date = new Date(new Date().getTime() + data.expires)
// 完成cookie最基本保存,后面跟的是cookie的过期时间
let cookie = `${data.name}=${data.value};data.expires=${date.toGMTString()}`
document.cookie = cookie
// 如果有以下的东西,就继续保存,有一个就保存一个
if (data.path) {
cookie = `path=${data.path}`
document.cookie = cookie
}
if (data.domain) {
// 这里给一个以秒为单位的过期设置
cookie = `domain=${data.domain};max-age=${data.expires}`
document.cookie = cookie
}
}
setCookie({
name: 'name',
value: 'YangMi',
expires: 10,
path: '/',
domain: 'mizhiweixiao.com'
})
// 为了方便看到过期时间的效果,这里每秒打印一次
setInterval(()=>{
console.log(document.cookie)
}, 1000)
二、 localStorage
大多浏览器上存储上限为5M,存储时间为无限期,除非手动清除,适用于需要长期存储的数据。
用法实例:
let str = 'Yang Mi is height 162cm'
let obj = {
name: 'YangMi',
height: '162cm'
}
// localStorage保存字符串
localStorage.setItem('str', str)
// 读取str字符串
console.log(localStorage.getItem('str'))
// localStorage保存对象,记得先转换成字符串,因为只支持保存字符串
localStorage.setItem('obj', JSON.stringify(obj))
// 要想读取到原来格式的数据,请转换数据格式
let object = localStorage.getItem('obj')
console.log(JSON.parse(object))
// 删除某个字段
localStorage.removeItem('str')
// 清除所有 localStorage 存储
localStorage.clear()
三、sessionStorage
临时存储,在大多浏览器中存储上限为5M,随浏览器的关闭或刷新删除。
使用方法可以直接参考和套用 localStorage 的使用实例,要说他们俩不一样的地方,除了存储时间外,可能就是存储的地方不一样,local 存储位置在 “本地存储” ,session 的存储位置在 “会话存储” 。