vue中localStorage存储信息的三种方法

前端使用localStorage、sessionStorage存储方法大家都不陌生了，今天主要记录下localStorage在vue项目中的存储使用方法。

• 区别：
  localStorage是本地存储，永久保存，除非主动删除；sessionStorage是会话存储，临时保存，并且它们只能存储字符串类型，对于复杂的对象可以使用JSON.stringify和JSON.parse来处理。
• 应用场景：
  localStorage、sessionStorage主要用于不同页面之间的传值。
• 存储有效时间：
  当刷新页面(指F5刷新，属于清除内存了)时，vuex存储的值会丢失，sessionStorage页面关闭后就清除了，localStorage不会，除非主动删除，所以我们需要根据的不同的需求决定是采用LocalStorage，还是SessionStorage保存数据。
• 注：很多人误认为localStorage可以代替vuex，对于不变的数据确实可以，但是当两个组件共用一个数据源(对象或数组)时，如果其中一个组件改变了该数据源，希望另一个级件响应该变化时，localStorage、sessionStorage无法做到，原因就是在于它们的区别。

第一种：

返回json格式

直接从后台返回的对象中获取键值，这样最方便快捷，在调用时可直接调用，但当项目中定义的字符串变理太多时，容易混乱

loginClick() {
      var param = {
        UserName: this.form.username,
        UserPwd: this.form.password,
      };
      apiGetLogin(qs.stringify(param)).then( (response) => {
        if (response.data.Code == 200) {
         //存储用户信息
         var hrCompanyId = response.data.Result.hrCompanyId;
         window.localStorage.setItem('hrCompanyId',hrCompanyId);

         var staffid = response.data.Result.staffid;
         window.localStorage.setItem('staffid',staffid);

          this.$router.push({ name: 'Home' });
          this.$message.success('登录成功');
        } else {
          this.$message.error(response.data.Message);
        }
      })
    }

//在调用时可直接调用
var params = {
  staffId: window.localStorage.getItem('staffid')
};

第二种：

结合第一种，第二种保存返回的整个对象，不需要把整个对象里的每个值都拿出来保存一次

loginClick() {
      var param = {
        UserName: this.form.username,
        UserPwd: this.form.password,
      };
      apiGetLogin(qs.stringify(param)).then( (response) => {
        if (response.data.Code == 200) {
         //存储用户信息
         var userInfo = response.data.Result;
         //把返回的对象转换为字符串，因为localstore是以字符串存文件的，直接存个对象识别不了，所以要先把对象转成json字符串
         window.localStorage.setItem('result',JSON.stringify(userInfo));

          this.$router.push({ name: 'Home' });
          this.$message.success('登录成功');
        } else {
          this.$message.error(response.data.Message);
        }
      })
    }

//获取的时候，要先获取json字符串，再parse成json对象
var uInfo = JSON.parse(window.localStorage.getItem('userInfo'));
var useToken = uInfo.token;

第三种：

与第二种的区别在于自己构建了一个json，其它使用方法一样，虽然有点麻烦，但能方便快速取键值

loginClick() {
      var param = {
        UserName: this.form.username,
        UserPwd: this.form.password,
      };
      apiGetLogin(qs.stringify(param)).then( (response) => {
        if (response.data.Code == 200) {
         //存储用户信息
         var result = response.data.Result;
          //方便快速取值
          var userInfo = {
            staffid: result.staffid,
            hrCompanyId: result.hrCompanyId,
            token: result.token,
          };
         //把返回的对象转换为字符串，因为localstore是以字符串存文件的，直接存个对象识别不了，所以要先把对象转成json字符串
         window.localStorage.setItem('userInfo',JSON.stringify(userInfo));

          this.$router.push({ name: 'Home' });
          this.$message.success('登录成功');
        } else {
          this.$message.error(response.data.Message);
        }
      })
    }

//获取的时候，要先获取json字符串，再parse成json对象
var uInfo = JSON.parse(window.localStorage.getItem('userInfo'));
var useToken = uInfo.token;

往数组里push字符：

因为localStorage中只接收字符串，所以往数组里push时，也要转换。

// 往数组里存储时，也要转换为字符串
 historyCityList = [];

//存储时转换为字符串存储，不然存储进去它会改变你原始定义的类型，把数组改变为对象object
 window.localStorage.setItem("historyCityList",JSON.stringify(this.historyCityList))

//获取时用再转换为数组显示
 this.historyCityList = JSON.parse(window.localStorage.getItem("historyCityList"));

存储时没转换改变原始定义类型

最后，sessionStorage的使用跟localStorage一样，只要把上面的localStore换成sessionStorage就可以。需要注意的是，如果我们数据是保存到sessionStorage中的，那只能通过sessionStorage获取；如果我们数据是存到localStorage，那就只能通过localStorage获取。