JavaScript Proxy API poskytuje množství "kouzla" v JavaScriptu, což vám umožňuje používat jakýkoli objekt jako druh alias, který umožňuje hradbu ověřování, formátování a házení chyb. Věděli jste, že můžete také použít Proxy API jako abstrakci k různým typům úložiště? Ať už je to sessionStorage
, localStorage
, nebo IndexedDB, můžete použít proxy, aby se s API mnohem snáze pracovalo!
Velmi základní použití Proxy API je následující:
/* 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 se snadno používá, ale použití proxy nám umožňuje používat známou syntaxi objektů a nakonec dokonce vyměnit typ úložiště, aniž by byla ovlivněna jakákoli další část vašeho kódu.
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;
Poznámka:Výše uvedený kód je velmi zjednodušený příklad – měli byste také přidat metody pro mazání z objektu a také zkusit/chytit, abyste předešli chybám při ukládání!
Můžete vyměnit localStorage
pro sessionStorage
a bude to mít velmi malý vliv na váš celkový kód! Pokud ve své aplikaci používáte úložiště, pravděpodobně již používáte a abstrakci, ale líbí se mi, že základní interakce s objektem JavaScriptu je příjemná.
A nejsem sám, komu se tento vzor líbí. Debugger Firefox DevTools používá tento vzor k abstrahování API IndexedDB pro ukládání bodů přerušení, karet a dalších předvoleb!