e-store

简介

EStore 是一个用于简化 Web 存储操作的 JavaScript 类。它支持 localStorage 和 sessionStorage，并提供了方便的方法来获取、设置和删除存储项。

安装

你可以通过以下方式引入 EStore：

npm install  @ziyu_hz/e-store --save

属性

• storage: 存储对象，可以是 localStorage(default) 或 sessionStorage。
• key: 存储的键名。
• get: 获取存储值的方法。
• set: 设置存储值的方法。
• remove: 删除存储值的方法。
• onChange: 添加值改变时的回调函数，可重复添加。
• onRemove: 值被删除时的回调函数，可重复添加。

使用方法

创建实例

import EStore from '@ziyu_hz/e-store';

const store = new EStore({
  storage: 'localStorage',
  key: 'testKey',
  initialValue: { name: 'test1', age: 28 },
});

store.onChange((newValue, oldValue) => {
  console.log(`${store.key} 已更新, ${oldValue.test} -> ${newValue.test}`);
  document.getElementById('currentValue').innerText = JSON.stringify(newValue);
});

store.onRemove((key, value) => {
  console.log(`${key} 已移除`, value.test);
  document.getElementById('currentValue').innerText = 'null';
});

// 更新用户信息
store.set({ name: 'test1', age: 29 });

// 获取用户信息
const userInfo = store.get();
console.log(userInfo); // 输出: { name: 'test1', age: 30 }

// 删除用户信息
store.remove();

TypeScript

使用泛型或者给 initialValue 传入初始值可以获得更好的类型提示

import EStore from '@ziyu_hz/e-store';

const store = new EStore<{ name: string; age: number }>({
  storage: 'localStorage',
  key: 'testKey',
  initialValue: { name: 'test1', age: 29 },
});

store.onChange((newValue, oldValue) => {
  console.log(`${store.key} 已更新, ${oldValue.test} -> ${newValue.test}`);
  document.getElementById('currentValue').innerText = JSON.stringify(newValue);
});

store.onRemove((key, oldValue) => {
  console.log(`${key} 已移除`, oldValue.test);
  document.getElementById('currentValue').innerText = 'null';
});

// 更新用户信息
store.set({ name: 'test1', age: 28 });

// 获取用户信息
const userInfo = store.get();
console.log(userInfo); // 输出: { name: 'test1', age: 30 }

// 删除用户信息
store.remove();

umd

<script src="@ziyu_hz/e-store/index.global.js"></script>
<script>
const EStore = window.EStore.default;
const store = new EStore({
  storage: 'localStorage',
  key: 'testKey',
  initialValue: { name: 'test1', age: 28 },
});

store.onChange((newValue, oldValue) => {
  console.log(`${store.key} 已更新`, newValue, oldValue);
  document.getElementById('currentValue').innerText = JSON.stringify(newValue);
});

store.onRemove((key, oldValue) => {
  console.log(`${key} 已移除`, oldValue);
  document.getElementById('currentValue').innerText = 'null';
});

 
store.set({
  name: 'test1',
  age: 30,
});

 
const userInfo = store.get();
console.log(userInfo); // 输出: { name: 'test1', age: 30 }

 
store.remove();
</script>