2025年localstorage 本地存储及token设置，vuex刷新数据丢失

科技前沿 • 2025-01-29 23:29 • 阅读 37

大家好，我是讯享网，很高兴认识大家。

本地存储简介

简单介绍：前端开发时js可以调用api在浏览器存储数据，大小总共未5M
可再浏览器查看，f12打开控制台
在这里插入图片描述
讯享网

方式：

使用：
localstorage和sessionstorage使用一样，下面的只需要替换就行

// 存：第一个参数为存在本地的名字，即本地容器的名字 localstorage.setItem('a',b) // 取：只有一个参数，即本地储存容器的名字 localstorage.getItem('aa') // 清除:只有一个参数，即本地储存容器的名字 localstorage.removeItem('aaa') //清除所有 localstorage.clear()

讯享网

注：
这里存或取都只有字符串才行，如果不是字符串要转换成字符串。

讯享网例：let arr = [1,2,3] localstorage.setItem('arr',JSON.stringfy(arr)) //JSON.stringfy()把arr转成字符串,对象类型也可用 let arr2 = JSON.parse(localstorage.getItem('arr')) //取出来是字符串，需要JSON.parse()进行转换

使用案例

// 具体的axios封装就不在这写了 // 请求拦截 axios.interceptors.request.use(config => { if (localstorage.getItem('token')) { const token = localstorage.getItem('token') // 这里本地浏览器存了的话就取出来 config.Token = token // config.Token 的这Token可自己设置，与后端协商一致即可 } return config }) // 响应拦截 axios.interceptors.response.use(config => { if (config.Token) { const token = config.Token localstorage.setItem('token',token ) } })

讯享网created () { 
    window.addEventListener('beforeunload'，() => { 
    // 不要忘了上面localstorage存数据的特性,用JSON.stringify sessionstorage.setItem('vuex',JSON.stringify(this.$store.state)) }) if(sessionstorage.getItem('vuex')) { 
    this.$store.state = JSON.parse(sessionstorage.getItem('vuex')) // 因为感觉在storage看的到vuex不舒服，所以就加上了这步 sessionstorage.removeItem('vuex') } }

2025年localstorage 本地存储及token设置，vuex刷新数据丢失

本地存储简介

使用案例

相关推荐