关于在Vue中使用localStorage的技巧

一、导读

关于在Vue中进行状态或数据储存的方案，主要有Vuex，LocalStorage，sessionStorage等几种，但是如果应对的场景是属于那种可以手动刷新，只需第一次加载的页面时，vuex的优势就不明显了，因为一旦刷新就相当于失效，而如果展示的数据非常大，那么sessionStorage也会因为大小的限制问题而被放弃，那么如何能够提高页面的加载体验同时，又能有效地管理本地状态呢？答案是LocalStorage。

二、基本用法

浏览器的本地储存LocalStorage主要通过全局window对象进行调用，存取的方法如下:

let data = '这是存储内容'
let name = '这是存储名称'
window.localStorage.setItem(name,data) //设置存储了name:data这种格式的数据，也就是键值对

let result = window.localStorage.getItem(name) //取出以name为键名的数据，赋值给result变量

使用方法是非常简单的，咋这么一看可能觉得就是往浏览器存个js对象，数据量多的时候还得多次存储，其实不然，利用JSON.stringify()方法把主要内容序列字符串化，取出来的时候用JSON.prase()反序列化即可。

三、在Vue中使用的技巧

既然用vue开发了，那就把组件化贯彻到底，总不能每次存取LocalStorage都正反序列化一次这么麻烦吧，那么我们可以在全局或者该组件目录下提前配置好方法，如在组件根目录下新建一个store.js文件:

const STORAGE_KEY='local_data'
export default{
    fetch(){
        return JSON.parse(window.localStorage.getItem(STORAGE_KEY)||'[]')
    },
    save(items){
        window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))
    }
}

如果需要更灵活，那么完全可以把STORAGE_KEY这个常量去掉，然后fetch()和save()函数都采用传参的形式获取存储结构中的键值。

在组件中调用:（只列出script部分）

<script>
	import Store from './store.js';
	export default {
		data(){
			return {
				tableData:['Tom','Chris','Dreak']
			}
		},
		methods:{
			saveData(){
				Store.save(this.tableData);
				//存储形式是： 'local_data':"['Tom','Chris','Dreak']"
			},
			getData(){
				let res = Store.fetch();
				console.log(res)
			}
		}
	}
</script>

四、适用场景

在一些电商H5页面或PC端页面中，商品经常需要下拉刷新或点击‘换一批’按钮刷新，那么也就是说第一次进入页面请求回来的数据，完全没必要用最新的数据，每次进入页面都请求一次，一来影响体验，二来增加了服务器压力，那么最好的做法是做本地缓存，也就是在请求前先判断本地是否有缓存可用，没有才去请求加载，这样对于优化体验有非常大的帮助。