JavaScript Proxy with Storage

By  on  

The JavaScript Proxy API provides a wealth of "magic" within JavaScript, allowing you to use any object as sort of an alias that allows a wall of validation, formatting, and error throwing. Did you know that you could also employ the Proxy API as an abstraction to different types of storage? Whether it's sessionStorage, localStorage, or IndexedDB, you can use a proxy to make the API much easier to work with!

A very basic usage of the Proxy API is as follows:

/*
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

The localStorage API is easy enough to use but employing a Proxy allows us to use the familiar object syntax and eventually even swap out the storage type without any other part of your code being effected.

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;

Note: The code above is a very simplistic example -- you'd also want to add methods for deleting from the object, as well as try/catch to prevent storage errors!

You could swap localStorage for sessionStorage and there'd be very little effect on your overall code! If you do use storage in your app, you're likely already using and abstraction, but I love the basic JavaScript object interaction pleasing.

And I'm not the only one that loves this pattern. Firefox DevTools debugger uses this pattern to abstract the IndexedDB API for storing breakpoints, tabs, and other preferences!

Recent Features

  • By
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

Incredible Demos

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!