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
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

Incredible Demos

  • By
    JavaScript Battery API

    Mozilla Aurora 11 was recently released with a bevy of new features. One of those great new features is their initial implementation of the Battery Status API. This simple API provides you information about the battery's current charge level, its...

  • By
    CSS Kwicks

    One of the effects that made me excited about client side and JavaScript was the Kwicks effect.  Take a list of items and react to them accordingly when hovered.  Simple, sweet.  The effect was originally created with JavaScript but come five years later, our...

Discussion

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