周末抽了一天时间开发了一款Storage加强插件

周末抽了一天时间开发了一款Storage加强插件

使用

npm i storage-free --save

开源地址：https://gitee.com/git_zs/storage-free

特点

storage-free以下统称SF

1. 有效期：在储存一个内容时传入有效期，在读取这条数据是SF会判断要读取的内容是否过期，如果过期则会返回null判断有效期时默认使用new Date(); 如果传入了依赖时间则会使用依赖时间；（此设定主要是为了防止用户在修改主机时间后欺骗程序获取错误的当前时间，依赖时间主要是提供给开发者，可以传入服务器时间以保证不被篡改）
2. 定制化： 将主体调用存储部分以回调函数的形式分离开放，使用者可以根据不同的storageAPI以达到兼容不同的平台目的
3. 分组概念： 因同域不同html的localStorage共享的特性，在使用储存是可能出现key污染，所以引入分组概念
   1. 每一个储存的key都会被带上组名，但开发者完全不用关心这个
      1. 例如：存储info信息时，开发者传入info作为key，SF会将它存为info${分隔符}${组名} 的形式，读取时也只需传入info，中间过程无需关心
   2. 清空逻辑处理，清空逻辑会默认删除当前分组的所以储存内容
4. 浏览器中使用：如果只在浏览器中使用可跳过自定义储存API : customStorage的讲解，直接看浏览器储存：browserStorage
5. 简单易懂：整体代码非常少，也没有任何复杂的逻辑

文档

自定义储存API : customStorage

使用此方法可以自定义储存器，例如小程序或uniapp的storageAPI，并返回一个提供增删改查的对象（return storage）

options

return storage method

示例

isSession// 此示例也是下方browserStorage的代码
import { customStorage } from "storage-free";
export default ({ separator, group, isJson, isSession }) => {
  const storage = isSession??false ? window.sessionStorage : window.localStorage;
  const custom = customStorage({
    separator,
    group,
    isJson: isJson ?? true,
    setItem(key, value) {
      storage.setItem(key, value);
    },
    getItem(key, callback) {
      callback(storage.getItem(key));
    },
    removeItem(key) {
      storage.removeItem(key);
    },
  });
  return {
    ...custom,
    clear() {
      custom.clear(Object.keys(storage));
    },
  };
};


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

浏览器储存：browserStorage

浏览器中使用可以直接使用此方法，已封装好方便快捷使用，源码即上方示例的代码

options

return storage method

使用示例

import { browserStorage } from "storage-free";

const storage = browserStorage({ separator: "~", group: "test" });

storage.setItem(
  "info",
  {
    username: "zs",
    token: "123456",
    userinfo: { type: 1 },
  },
  5000
);

// 5秒后获取的就为null了
setInterval(async () => {
  console.log(await storage.getItem("info"));
}, 1000);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

推荐方式

推荐在项目中封装一个storage文件 然后抛出 browserStorage 的执行结果

// storage.js文件
// 分组概念一般在多项目共用一个域名的场景下使用，此作为演示
// 初始化 test分组
export const test = browserStorage({ separator: "~", group: "test" });
// 初始化 dog分组
export const dog = browserStorage({ separator: "~", group: "dog" });
1
2
3
4
5
6

// 需要使用的文件
import { test } from "storage.js";

test.setItem("test", "test", 10 * 1000);
1
2
3
4