JavaScript代理API在JavaScript中提供了豐富的“魔力”，允許您使用任何對象作為別名，從而允許驗(yàn)證、格式化和拋出錯(cuò)誤。您是否知道您還可以使用代理API作為對不同類型存儲的抽象?無論是sessionStorage、localStorage還是IndexedDB，都可以使用代理使API更容易使用!

Proxy API的一個(gè)非?；镜挠梅ㄈ缦?

/* 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很容易使用，但使用代理允許我們使用熟悉的對象語法，最終甚至可以在不影響代碼的任何其他部分的情況下?lián)Q出存儲類型。

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;

注意:上面的代碼是一個(gè)非常簡單的示例——您還需要添加用于從對象中刪除的方法，以及try/catch來防止存儲錯(cuò)誤!

您可以將localStorage交換為sessionStorage，這對整個(gè)代碼的影響非常小!如果你在你的應(yīng)用中使用存儲，你可能已經(jīng)在使用和抽象，但我喜歡基本的JavaScript對象交互愉快。

而且我不是唯一一個(gè)喜歡這種模式的人。Firefox DevTools調(diào)試器使用這種模式來抽象IndexedDB API，用于存儲斷點(diǎn)、選項(xiàng)卡和其他首選項(xiàng)!