[译]使用 Proxy 更好的封装 Storage API
⭐️ 更多前端技术和知识点,搜索订阅号JS 菌
订阅看到篇文章觉得不错,原文:https://davidwalsh.name/javas...。讲的是使用 Proxy 来封装 Storage API,做一层提供存取数据的代理层。这里简单翻译一下这篇文章的主要内容。
封装 Storage
这篇文章提到 Proxy 这种语法可以用来封装 sessionStorage、 localStorage 甚至是 IndexedDB。可以使用 Proxy 代理来使 API 更容易使用。
首先介绍一下 Proxy 的基本用法:
/*
const proxy = new Proxy({}, {
get: (obj, prop) => { ... },
set: (obj, prop, value) => { ... },
// more props here
});
*/
// This basic proxy returns null instead of undefined if the
// property doesn't exist
// 如果属性不存在那么返回的是 null 而不是 undefined
const proxy = new Proxy({}, {
get: (obj, prop) => {
return prop in obj ? obj[prop] : null;
}
});
// proxy.whatever => null
然后编写一种存取 Storage 数据的代理:
// storage 是 Storage API 的类型,可以是 localStorage 或是 sessionStorage
// prefix 则属于 namespace
function getStorage(storage, prefix) {
// 这里返回一个 Proxy 实例,调用这个实例的 set 或 get 方法来存取数据
return new Proxy({}, {
set: (obj, prop, value) => {
obj[prop] = value;
storage.setItem(`${prefix}.${prop}`, value);
},
get: (obj, prop) => {
// return obj[prop];
return storage.getItem(`${prefix}.${prop}`);
},
});
}
// Create an instance of the storage proxy
// 使用的时候首先通过 namespace 创建 Storage Proxy 实例
const userObject = getStorage(localStorage, "user");
// Set a value in localStorage
// 然后通过直接访问属性的方法来操作数据
userObject.name = "David";
// Get the value from localStorage
// 可以方便的使用解构获取数据
const { name } = userObject;
补充
class Storage {
constructor(storage, prefix) {
this.storage = storage;
this.prefix = prefix;
}
getItem(prop) {
return this.storage.getItem(`${this.prefix}.${prop}`);
}
setItem(prop, val) {
return this.storage.setItem(`${this.prefix}.${prop}`, val);
}
}
使用 class 封装 Storage 通过 new 方法创建实例,并使用 get/setItem 方法操作明显没有 Proxy 封装后使用属性操作符读取数据更方便。
请关注我的订阅号,不定期推送有关 JS 的技术文章,只谈技术不谈八卦 ?
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。