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

本地存储简介

简单介绍：前端开发时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')
	}
}