JavaScript proxy s úložištěm

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!