记录：vue使用cookie、vuex和localstorage、sessionStorage进行状态管理

本文链接：https://blog.youkuaiyun.com/by_side_with_sun/article/details/92400853

一.cookie、session、localStorage、sessionStorge总体介绍

cookie：浏览器储存，最大4KB，请求头会自动带上（最先验证的时候可以使用），vue中默认有效时间为浏览器关闭，django中可以自己设置。（位于google的setting里面，你可以去找找/控制台的Application里面都有）

session：保存在服务器，配合着用挺好。（一般是放在数据库里的session表里面）

localStorage：除非被清除，否则永久保存，大小5M，最大好处，你不删除永远存在。（控制台的Application里面都有）

sessionStorage：仅在当前会话下有效，关闭页面或浏览器后被清除，大小5M，这是它与上面的区别。（控制台的Application里面都有）

localStorage:

1.查询数据：localStorage.getItem('dataTest')

2.修改数据：localStorage.setItem('dataTest', '这是测试的')

3.删除数据/全删除：localStorage.removeItem('dataTest') | localStorage.clear()

sessionStorage:

1.查询数据：sessionStorage.getItem('token')

2.修改数据：sessionStorage.setItem('token', 'lalla')

3.删除数据/全删除：sessionStorage.removeItem("token") | sessionStorage.clear()

cookie:

cookie.js

export function setCookie (cname, value, expire) {
  var date = new Date()
  date.setSeconds(date.getSeconds() + expire)
  document.cookie = cname + '=' + escape(value) + '; expires=' + date.toGMTString()
  // console.log(document.cookie)
}

export function getCookie (cname) {
  if (document.cookie.length > 0) {
    let cstart = document.cookie.indexOf(cname + '=')
    if (cstart !== -1) {
      cstart = cstart + cname.length + 1
      let cend = document.cookie.indexOf(';', cstart)
      if (cend === -1) {
        cend = document.cookie.length
      }
      return unescape(document.cookie.substring(cstart, cend))
    }
  }
  return ''
}

export function delCookie (cname) {
  setCookie(cname, '', -1)
}

然后在main.js里面注册