前端本地存储：cookie，localStorage，sessionStorage

一、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 的存储位置在 “会话存储” 。