Previously, in Browser storage: Add caching to a service, I outlined how to implement browser caching logic in services responsible for retrieving data. We can go one step further by extracting this logic into an npm package. Doing this eliminates repetitive code we need to copy between JavaScript and TypeScript projects. Read on to learn how to cache data in browser storage using a lightweight npm package.

mini-stash

mini-stash is a lightweight npm package responsible for streamlining local and session storage. The package page has all the information and examples needed to get up and running quickly.

Essentially, the 3 essential actions involved with browser storage are handled with sensible defaults and configuration options to account for the 4 key considerations when implementing browser storage.

import { clear, stash, retrieve } from 'mini-stash';

// retrieve from local storage (discard if older than a day)
const storageKey = 'myApp_coordinates';
let coords = retrieve(storageKey, 60 * 24);

if (!coords) {
  // ... get the coords
  coords = {
    latitude: 33.441792,
    longitude: -94.037689
  };

  // save to local storage
  stash(storageKey, coords);
} else {
  console.log('retrieved from local storage');
}

// manually clear from local storage
clear(storageKey);

Getting Started

The source code on github is nearly identical to code outlined in previous posts in the series.

Check out the example in the project's readme for more info inluding installation and examples


Last updated