一.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里面注册

二.vuex

vuex我觉得就是组件之间的一个便利的状态通信,如何传递一个状态都要去用父组件转递,bus传递,考虑到这样特别费劲,所以用它吧,仅个人认为。

vuex创建store文件夹

index.js

getters.js

在vue里面我们需要获取vuex值的时候,一般两个方式:this.$store.state.name   |    this.$store.getters.getUsername

rootState.js

actions.js

mutations.js

这个就是项目结构了,vuex刷新页面状态就没了,所以需要localStorage或者sessionStorage来配合

下面是具体的使用方法:

1.查询数据:this.$store.state.name   |    this.$store.getters.getUsername

2.修改数据:this.$store.dispatch('changeName', 'newname')

Logo

前往低代码交流专区

更多推荐