前言

在前端开发中，localStorage 的应用是十分多的，然而原生的 localStorage 有些性能是没有的，比方：

1. 无奈设置每一个键的过期工夫
2. 无奈按模块治理 localStorage

一、如何应用

先来看看如何应用的，再看实现办法：

1、初始化时传入 moduleName

let storage = new Storage('user'); // 设置了模块名为 user
storage.setItem('name', '张三', 60 * 60 * 24); // 过期工夫 1 天
storage.setItem('age', 18);

storage.clear(); // 清空所有 localStorage
storage.clear('user'); // 清空模块名 user 的 localStorage

2、初始化时不传入 moduleName

let storage = new Storage();
storage.setItem('name', '张三', 60 * 60 * 24, 'user'); // 过期工夫 1 天、模块名为 user
storage.setItem('name', 'mac', 'system'); // 模块名为 system

storage.getItem('name', 'system'); // 获取模块 system 下的 name
storage.clear('system'); // 清空模块名 system 的 localStorage

获取时如果过期了，则会主动清空数据，并返回状态

二、实现代码

class Storage {constructor(moduleName) {
    this.moduleName = moduleName;
    this.storage = localStorage || window.localStorage;
    this.status = {
      SUCCESS: 0,
      FAILURE: 1, // 失败
      OVERFLOW: 2, // 超出限度，localstorage 最大反对 5M 的数据（每个浏览器各自又有些不同）TIMEOUT: 3 // 过期
    };
  }

  setItem(key, value) {let expire, moduleName, args = Array.prototype.slice.call(arguments, 2);
    if (args.length > 0) { // 解决参数程序
      if (typeof args[0] == 'number') {[expire, moduleName] = args;
      } else {[moduleName, expire] = args;
      }
    }

    key = this.normalizeKey(key, moduleName);
    let status = this.status.SUCCESS, data = value;

    if (!expire && ['[object Object]', '[object Array]'].indexOf(Object.prototype.toString.call(value)) > -1) { // 没有设置过期工夫 + 是对象或数组
      data = JSON.stringify(value);
    } else if (expire) {
      data = JSON.stringify({
        value,
        _expireTime_: new Date().getTime() + expire * 1000
      });
    }

    try {this.storage.setItem(key, data);
    } catch(e) {status = this.status.OVERFLOW;}

    return status;
  }

  getItem(key, moduleName) {
    let status = this.status.SUCCESS, data = null;
    key = this.normalizeKey(key, moduleName);

    try {data = this.storage.getItem(key);
    } catch(e) {status = this.status.FAILURE;}

    try {data = JSON.parse(data);
    } catch (error) {}

    if (data && data.value && data._expireTime_) { // 设置了生效工夫
      if (new Date().getTime() > data._expireTime_) { // 生效
        data = null;
        status = this.status.TIMEOUT;
        this.storage.removeItem(key)
      } else {data = data.value;}
    }
    return {
      status,
      value: data
    };
  }

  clear(moduleName) {if (moduleName) {const keys = Object.keys(this.storage);
      keys.forEach(key => {if (key.indexOf(moduleName + '/') === 0) {this.storage.removeItem(key);
        }
      })
    } else {this.storage.clear();
    }
  }

  normalizeKey(key, moduleName) {
    let ModuleName = moduleName || this.moduleName; // 独自设置就用独自设置的，否则用初始化时候传入的
    if (typeof key !== 'string') {console.warn(`${key} used as a key, but it is not a string.`);
      key = String(key);
    }
    return `${ModuleName ? ModuleName + '/' : ''}${key}`;
  }
}

以上就是我本人封装的 localStorage 啦，心愿能够帮到有须要的人，如果能够的话，麻烦点个赞或者珍藏下呦~

结尾

我是周小羊，一个前端萌新，写文章是为了记录本人日常工作遇到的问题和学习的内容，晋升本人，如果您感觉本文对你有用的话，麻烦点个赞激励一下哟~