介绍
mem-storage-area 是一个用于浏览器内存存储的 npm 包，它提供了一个简单易用的接口，允许您在前端保存和获取一些简单的数据。
与 cookie 不同，mem-storage-area 存储的数据仅存在于当前会话，且不会发送到服务器端。而且，数据存储在内存中，相对于 LocalStorage 和 SessionStorage 等等，其读写性能更佳。
安装
使用 npm 进行安装：
npm install mem-storage-area --save
安装后，即可在代码中引入该包：
import MemStorageArea from 'mem-storage-area';
使用方法
初始化
在使用该包前，你需要初始化一个 MemStorageArea 的实例，以便对其进行存储和获取操作。
import MemStorageArea from 'mem-storage-area'; const memStorageArea = new MemStorageArea();
你也可以传入一个 key（字符串类型），以创建多个不同的存储区域，比如：
const userMemStorageArea = new MemStorageArea('user');存储数据
使用 set 方法来存储数据，其接受两个参数，如下：
memStorageArea.set('name', 'Tom');name 参数为所存储数据的键值，Tom 为其值。
获取数据
使用 get 方法来获取数据，其接受一个参数，为所需获取数据的键名。
const name = memStorageArea.get('name');使用 get 方法来获取不存在的键名时，返回结果为 undefined。
你也可以传入一个默认值，使得在找不到该键名时可以返回指定的默认值。
const age = memStorageArea.get('age', 18);如果键名为复杂数据类型，如对象、数组等，则需要在获取数据时进行反序列化操作。
const userInfo = JSON.parse(memStorageArea.get('userInfo'));删除数据
使用 remove 方法来删除已存储的数据，其接受一个参数，为所需删除数据的键名。
memStorageArea.remove('name');清空存储区域
如果需要清空某个存储区域的所有数据，可以使用 clear 方法。
memStorageArea.clear();
监听数据变化
你可以通过调用 onChange 方法，监听存储区域中数据的变化。其接受一个回调函数，在数据变化时会被调用。
memStorageArea.onChange(() => {
console.log('数据发生了变化！');
});同时，你也可以通过传入 key 参数，来指定监听某个键值的变化。
memStorageArea.onChange('name', newValue => {
console.log(`name 键值的值已变为 ${newValue}！`);
});示例代码
-- -------------------- ---- ------- ------ -------------- ---- ------------------- ----- -------------- - --- ----------------- -- ---- -------------------------- ------- -- ---- ----- ---- - --------------------------- -- ---- ------------------------------ -- ------ ----------------------- -- ------ -------------------------- -- - ------------------------ --- ------------------------------- -------- -- - ----------------- ------- --------------- ---
结语
在前端开发中，我们经常需要使用一些存储数据的工具，以实现数据的持久化存储或者简单设置。mem-storage-area提供了一种内存存储的解决方案，简单易用且性能比较优秀，它的一些常规操作都可以通过熟悉的 CRUD（增删改查）方法进行实现。在实际开发中，您可以根据实际需求，灵活应用其提供的接口。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005736881e8991b448e9654