npm 包 @friends-of-js/web-storage 使用教程

简介

@friends-of-js/web-storage 是一个纯 JavaScript 编写的 web 存储解决方案，在前端开发中使用非常方便。通过它可以轻易地在浏览器端进行 localStorage 和 sessionStorage 操作。

安装

首先需要安装该包，可以使用 npm 或 yarn 进行安装。

npm install @friends-of-js/web-storage --save

或者

yarn add @friends-of-js/web-storage

使用

安装完成后，就可以在前端代码中使用该包了。在你的 JavaScript 文件中引入该包。

import { WebStorage } from "@friends-of-js/web-storage";

创建一个 WebStorage 实例

import { WebStorage } from "@friends-of-js/web-storage";

const storage = new WebStorage();

存储一个值

import { WebStorage } from "@friends-of-js/web-storage";

const storage = new WebStorage();
storage.local.set("name", "Friends of JS");

读取一个值

import { WebStorage } from "@friends-of-js/web-storage";

const storage = new WebStorage();
const name = storage.local.get("name");
console.log(name);  // Friends of JS

删除一个值

import { WebStorage } from "@friends-of-js/web-storage";

const storage = new WebStorage();
storage.local.remove("name");

清空存储

import { WebStorage } from "@friends-of-js/web-storage";

const storage = new WebStorage();
storage.local.clear();

事件监听

WebStorage 的变化可以被监听。例如：当一个值被设置时触发回调。

import { WebStorage } from "@friends-of-js/web-storage";

const storage = new WebStorage();
storage.local.on("set", function(key, oldValue, newValue) {
  console.log(`key: ${key}, oldValue: ${oldValue}, newValue: ${newValue}`);
});

storage.local.set("name", "Friends of JS");

总结

通过该包，我们可以很方便地在前端开发中进行 Web 存储，无需自己编写复杂的存储代码。同时，该包强调了事件的监听，可以让开发者更好地获取存储变化情况，提高了开发体验和代码质量。

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