带存储的JavaScript代理

JavaScript代理API在JavaScript中提供了丰富的“魔力”，允许您使用任何对象作为别名，从而允许验证、格式化和抛出错误。您是否知道您还可以使用代理API作为对不同类型存储的抽象?无论是sessionStorage、localStorage还是IndexedDB，都可以使用代理使API更容易使用!

Proxy API的一个非常基本的用法如下:

/* 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 const proxy = new Proxy({}, {   get: (obj, prop) => {     return prop in obj ? obj[prop] : null;   } }); // proxy.whatever => null

localStorage API很容易使用，但使用代理允许我们使用熟悉的对象语法，最终甚至可以在不影响代码的任何其他部分的情况下换出存储类型。

function getStorage(storage, prefix) {   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 const userObject = getStorage(localStorage, "user"); // Set a value in localStorage userObject.name = "David"; // Get the value from localStorage const { name } = userObject;

注意:上面的代码是一个非常简单的示例——您还需要添加用于从对象中删除的方法，以及try/catch来防止存储错误!

您可以将localStorage交换为sessionStorage，这对整个代码的影响非常小!如果你在你的应用中使用存储，你可能已经在使用和抽象，但我喜欢基本的JavaScript对象交互愉快。

而且我不是唯一一个喜欢这种模式的人。Firefox DevTools调试器使用这种模式来抽象IndexedDB API，用于存储断点、选项卡和其他首选项!