本地存储简介

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

方式:

1.localstorage
在本地浏览器长期存储,需要手动清除才会消失(清除浏览器缓存或调用js方法清除)

2.sessionstorage
在本地浏览器存储,但只存在一次会话级(即浏览器关闭再打开就没了)

使用
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()进行转换

使用案例

1.登录状态token判定
在使用axios请求数据时:

//	具体的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 )
	}
})

2.在使用vuex时刷新页面,vuex的数据会重置,这时就可以结合storage来解决
因为页面刷新必定会刷新最外层的APP.vue,所以这段就写在app.vue好了

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')
	}
}
Logo

前往低代码交流专区

更多推荐