npm 包 store2 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

store2 是一个基于 localStorage 和 sessionStorage 封装的简单易用的前端本地存储库，可以让开发者在客户端存储和获取键值对数据，并且还支持链式调用。

安装

使用 npm 进行安装：

npm install store2

或者使用 yarn 进行安装：

yarn add store2

使用

先引入 store2：

import store from 'store2';

存储数据

使用 store.set(key, value) 方法存储数据：

store.set('name', 'Tom');

可以通过链式语法存储多个值：

store.set('name', 'Tom').set('age', 18);

也可以传入一个对象存储多个键值对：

store.set({
  name: 'Tom',
  age: 18,
});

获取数据

使用 store.get(key) 方法获取数据：

const name = store.get('name');
console.log(name); // Tom

如果指定的键不存在，则返回 undefined。

还可以传入一个默认值作为第二个参数，当指定的键不存在时返回该默认值：

const gender = store.get('gender', 'male');
console.log(gender); // male

删除数据

使用 store.remove(key) 方法删除指定的键值对：

store.remove('name');

也可以使用链式语法删除多个键值对：

store.remove('name').remove('age');

清空数据

使用 store.clear() 方法可以清空所有的键值对：

store.clear();

高级用法

命名空间

使用 store.namespace(namespace) 可以创建一个命名空间，该命名空间下的存储会被自动添加一个前缀，避免与其他命名空间下的键冲突：

const userStore = store.namespace('user');
userStore.set('name', 'Tom');

过期时间

使用 store.set(key, value, {expires: time}) 方法可以为键值对设置过期时间，time 是一个 Date 对象或者一个时间戳（单位为毫秒）：

store.set('name', 'Tom', { expires: new Date('2023-12-31') });

也可以使用相对时间：

store.set('name', 'Tom', { expires: 3600 }); // 1 hour

自定义序列化和反序列化函数

默认情况下，store2 使用 JSON.stringify 和 JSON.parse 来序列化和反序列化数据。如果需要自定义序列化和反序列化函数，可以使用 store.set(key, value, {serialize, deserialize}) 方法：

store.set('user', { name: 'Tom', age: 18 }, {
  serialize: (value) => {
    return btoa(JSON.stringify(value));
  },
  deserialize: (value) => {
    return JSON.parse(atob(value));
  },
});

总结

store2 是一个非常简便易用的前端本地存储库，可以方便地在客户端存储和获取数据。同时，它还支持命名空间、过期时间、自定义序列化和反序列化函数等高级用法。在实际开发中，我们可以根据具体情况灵活使用 store2 来简化前端开发。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/35344

npm 包 store2 使用教程

简介

安装

使用