vue2存储数据方法

前言

在浏览网页时我们有些时候需要记住一些用户选择的信息，比如登陆时我们如果选择了记住密码，那么我们下次进入该网页时就会有你上次的登陆信息。
在网站开发中，我们可能会遇到左边是列表，右边显示内容的页面，当我们切换页面再返回的时候，需要记住我们上次选择的列表项。
这个时候，我们就要使用数据储存来记住一些信息。这里有两种方法：Vuex(状态管理)和本地存储（localStorage和sessionStorage）

本地存储

vuex存储的数据会在页面刷新后被移除，但本地存储的数据却不会。本地存储分两种：localStorage和sessionStorage
区别：
localStorage：可长期存储数据，除非用户清楚localStorage信息，否则数据会一直存在。同一中浏览器之间，不同页面，数据可以共享。
sessionStorage：短期存储数据，用户关闭标签页后或直接关闭浏览器后数据会清空。同一浏览器不同页面之间，数据不可共享
使用方法相同。

1.存储数据
本地存储可直接使用，不需要引入，代码如下：

// 将this.pickerItem的数据存储入insuranceCode,需提前转化成string类型
localStorage.setItem("insuranceCode", JSON.stringify(this.pickerItem));
sessionStorage.setItem("insuranceCode", JSON.stringify(this.pickerItem));

2.取出数据
现在我要把数据放入vuex中存起来，相当于把苹果放入果盘，我们需要在页面中的方法里面这样使用，代码如下：

 JSON.parse(localStorage.getItem("insuranceCode"));
JSON.parse(sessionStorage.getItem("insuranceCode"));

3.清除数据
，可清楚指定的数据，也可清楚所有数据，代码如下：

// 清除insuranceCode
localStorage.removeItem("insuranceCode");
sessionStorage.removeItem("insuranceCode");
// 清除所有
localStorage.clear();
sessionStorage.clear();