The easy way to do state

A namespaceable localStorage pub/sub utility for the masses.

Event-driven, persistent state management built on top of localStorage and sessionStorage.

const pointsStorage = new CheapState('points');
pointsStorage.set('paceaux', 10);

Optionally, instantiate with sessionStorage:

const pointsStorage = new CheapState('points', 'session');

pointsStorage.set('frank', 10);
pointsStorage.get('frank');// 10

pointsStorage.setObject({
    'frank': 10,
    'joe': 20,
    'sally': 30
});
pointsStorage.get('frank'); // 10

const points = new Map([
    ['frank', 10],
    ['joe', 20],
    ['sally', 30]
]);

pointsStorage.setObject(points);
pointsStorage.get('frank'); // 10

pointsStorage.delete('sally');

pointsStorage.clear();

const badgeEls = document.querySelectorAll('.badge');
badgeEls.forEach((badgeEl) => {
    updateBadge(badgeEl)

    // add a subscriber
    pointsStorage.subscribe((payload) => {
        // does the key match this element's key?
        if (payload.key === badgeEl.dataset.key) {
            // update it!
            updateBadge(badgeEl);
        }
    });
});

Global Class

new CheapState(namespace, type)

string with with <namespace>.<keyname>.

Makes a value safe to be stored in localStorage.

string version of the value.

Converts a string into a JavaScript value;

any version of the value.

Adds a namespace to storage

string the namespace for the CheapState instance.

Function[] a list of the observers for the CheapState instance.

string[] a list of the namespaces in storage.

Storage either localStorage or sessionStorage.

Map<'string', any> all of the items in storage for the given namespace.

number the number of items in storage for the given namespace.

number the number of items in storage for the given namespace. (alias for size)

Determines if a namespace already exists

boolean if the namespace exists.

Sets an item into storage

Sets an object's keys and values into storage.

Gets an item from storage.

any the value of the key.

Determines if an item exists in storage.

boolean whether the key exists.

Deletes an item from storage.

Deletes all items in the namespaced storage.

Adds a function to observables; allows it to receive a payload when storage changes

Removes a function from observables

Sends a payload to the observer