digitalist.global // October 05 2016

Create client side cache using ES6 Proxy

With the release of ES6 (ECMAScript 2015) they added the new Proxy feature. It lets you create a middleware when doing changes to a object.

With the release of ES6 (ECMAScript 2015) they added the new Proxy feature. It lets you create a middleware when doing changes to a object. We will use this to build a simple cache helper for the client side. We will use sessionStorage to store the data so we don’t have to care about invalidation.

// The name of the sessionStorage item.
const sessionKey = 'cachedData';
// Get stored items
const sessionItems = sessionStorage.getItem(sessionKey);
// Parse the stringified items if it exists else create a empty object
let cachedItems = sessionItems ? JSON.parse(sessionItems) : {};

const handler = {
  // This trap (function) will be run each time we are setting the property values
  set (target, key, value) {
    
    // Add the new item to our cached array
    cachedItems[key] = value;
    
    // And parse it and add it to sessionStorage
    sessionStorage.setItem(sessionKey, JSON.stringify(cachedItems));
    return true;
  }
}

// Create a new proxy with our cachedItems and our handler object with the set functiton only
let cache = new Proxy(cachedItems, handler);

 

Where we do our api calls we can use it like this:

const url = '/api/some_url';

// If the requested api path have already been requested and stored in our object
if(cache[url]) {
  doSomethingWithResponse(cache[url]);
}
// Else fetch the data from the api and add it to our object
else {
  fetch(url).then((response) => {
    cache[url] = response;
    doSomethingWithResponse(response);
  });
}

 

 

More from digitalist.global