Vue中封装localStorage和sessionStorage方法

首先说下localStorage和sessionStorage方法的区别:
1.localStorage 方法存储的数据没有时间限制。
2.sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

封装步骤如下:

1.在src/assets文件下创建一个js文件夹,在js文件夹中创建一个local.js
代码如下:

    // local操作
    const localData = function (method, name, obj) {
      /*
       * 参数说明：
       * method：get获取，set存入或覆盖，clean清除
       * name:localStorage的名称
       * obj:存入的内容，可以是任意类型
       * localStorage.getItem(key):获取指定key本地存储的值
       * localStorage.setItem(key,value)：将value存储到key字段
       * localStorage.removeItem(key):删除指定key本地存储的值
       * */ 
      switch (method) {
        case 'get':
          if (localStorage.getItem(name + '_obj')) {
            return JSON.parse(localStorage.getItem(name + '_obj'));
          } else if (localStorage.getItem(name + '_str')) {
            return localStorage.getItem(name + '_str');
          } else {
            return null
          }
        case 'set':
          localData('clean', name);
          if (typeof obj == 'object') {
            localStorage.setItem(name + '_obj', JSON.stringify(obj));
          } else {
            localStorage.setItem(name + '_str', obj);
          }
          return true;
        case 'clean':
          localStorage.removeItem(name + '_obj');
          localStorage.removeItem(name + '_str');
          return true;
      }
    };
    
    // session操作
    const sessionData = function (method, name, obj) {
      /*
       * 参数说明：
       * method：get获取，set存入或覆盖，clean清除
       * name:session的名称
       * obj:存入的内容，可以是任意类型
       * */
      switch (method) {
        case 'get':
          if (sessionStorage.getItem(name + '_obj')) {
            return JSON.parse(sessionStorage.getItem(name + '_obj'));
          } else if (sessionStorage.getItem(name + '_str')) {
            return sessionStorage.getItem(name + '_str');
          } else {
            return null
          }
        case 'set':
          sessionData('clean', name);
          if (typeof obj == 'object') {
            sessionStorage.setItem(name + '_obj', JSON.stringify(obj));
          } else {
            sessionStorage.setItem(name + '_str', obj);
          }
          return true;
        case 'clean':
          sessionStorage.removeItem(name + '_obj');
          sessionStorage.removeItem(name + '_str');
          return true;
      }
    };
    
    export {localData, sessionData}

2.在main.js中引入localData, sessionData两个封装好的方法.

	import {localData, sessionData} from "../src/assets/js/local"
    Vue.prototype.localData = localData;
    Vue.prototype.sessionData=sessionData;

3.在组件中使用的方法

    this.localData("方法","名字",数据);              //使用localStorage进行数据处理
    this.sessionData("方法","名字",数据);            //使用sessionStorage进行数据处理