代码拉取完成,页面将自动刷新
npm i storage-free --save
storage-free以下统称SF
info
信息时,开发者传入info
作为key,SF会将它存为info${分隔符}${组名}
的形式,读取时也只需传入info
,中间过程无需关心使用此方法可以自定义储存器,例如小程序或uniapp的storageAPI,并返回一个提供增删改查的对象(return storage)
options
属性/方法名 | 描述 | 类型 | 默认值 |
---|---|---|---|
separator | key与分组的分隔符 | string | '-' |
group | 分组 | string | - |
isJson | 是否需要做JSON序列化,开启是便无需自己JSON.stringify和parse了,如uniapp这种已存在这样功能的可以关闭 | boolean | true |
getCustomTime | 如果需要使用服务器时间可使用此方法,并返回一个时间戳 | ():number => | - |
customSetItem必填
|
自定义储存器的setItem方法用于储存,提供参数(key, value) | function | - |
customGetItem必填
|
自定义储存器的getItem方法用于获取对应key的value,提供参数(key) | function | - |
customRemoveItem必填
|
自定义储存器的removeItem方法用于删除key对应内容,提供参数(key) | function | - |
return storage method
方法名 | 描述 |
---|---|
setItem | 添加一条持久化数据到本地;入参(key, value, time) time为有效时长时间戳 |
getItem | 查询一条已经存在的持久化数据,未查询到返回null;入参(key);返回的是一个promise使用await或then接收结果 |
removeItem | 删除一条已存在的持久化数据;入参(key) |
clear | 清空当前分组的所有持久化数据;入参(key[])key[]为本地所有已存在持久化数据的key,SF会通过分隔符+分组进行过滤;如不使用分组功能清空时可以不使用SF的clear方法; |
示例
isSession// 此示例也是下方browserStorage的代码
import { customStorage } from "storage-free";
export default ({ separator, group, isJson, isSession } = {}) => {
const storage = isSession ? window.sessionStorage : window.localStorage;
const custom = customStorage({
separator,
group,
isJson: isJson ?? true,
customSetItem(key, value) {
storage.setItem(key, value);
},
customGetItem(key) {
return storage.getItem(key);
},
customRemoveItem(key) {
storage.removeItem(key);
},
});
return {
...custom,
clear() {
custom.clear(Object.keys(storage));
},
};
};
浏览器中使用可以直接使用此方法,已封装好方便快捷使用,源码即上方示例的代码
options
属性/方法名 | 描述 | 类型 | 默认值 |
---|---|---|---|
separator | key与分组的分隔符 | string | '-' |
group | 分组 | string | - |
isJson | 是否需要做JSON序列化,开启是便无需自己JSON.stringify和parse了,如uniapp这种已存在这样功能的可以关闭 | boolean | true |
isSession | 是否使用sessionStorage | boolean | false |
return storage method
方法名 | 描述 |
---|---|
setItem | 添加一条持久化数据到本地;入参(key, value, time) time为有效时长时间戳 |
getItem | 查询一条已经存在的持久化数据,未查询到返回null;入参(key);返回的是一个promise使用await或then接收结果 |
removeItem | 删除一条已存在的持久化数据;入参(key) |
clear | 清空所有当前分组下的持久化数据 |
使用示例
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);
推荐方式
推荐在项目中封装一个storage文件 然后抛出 browserStorage 的执行结果
// storage.js文件
// 分组概念一般在多项目共用一个域名的场景下使用,此作为演示
// 初始化 test分组
export const test = browserStorage({ separator: "~", group: "test" });
// 初始化 dog分组
export const dog = browserStorage({ separator: "~", group: "dog" });
// 需要使用的文件
import { test } from "storage.js";
test.setItem("test", "test", 10 * 1000);
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。