Local-storage-proxy-wrapper NPM

Local Storage Proxy (browser / node)

A library which provides assistance in managing the localStorage object and adds the capability to detect modifications to localStorage.

API Reference

API Reference

Installation

To install the library, run the following command:

npm install local-storage-proxy-wrapper
# or
yarn add local-storage-proxy-wrapper

Purpose

It provides more intuitive way to use localStorage and various functionalities like setting, getting, and deleting values, listening for changes to localStorage, getting the history of previous changes, and getting or setting multiple keys...

Usage

To use the library, import it into your project:

Usage with a wrapper ( recommended )

import { LocalStorageWrapper, localStorageProxy } from 'local-storage-proxy-wrapper';

To set a value, use the following syntax:

const store = new LocalStorageWrapper();
// Returns true if successfuly set
store.set(localStorageProxy, 'yourKey', 'yourValue');

To get a value, use the following syntax:

const store = new LocalStorageWrapper();
// Contains the value of yourKey
store.get(localStorageProxy, 'yourKey');

To listen for changes to the localStorage object, use the following syntax:

const store = new LocalStorageWrapper();

store.addChangeListener('yourKey', (newValue, oldValue) => {
    console.log('changed', newValue, oldValue);
});

// Will log 'changed yourValueOne undefined'
store.set(localStorageProxy, 'yourKey', 'yourValueOne');

// Will log 'changed yourValueTwo yourValueOne'
store.set(localStorageProxy, 'yourKey', 'yourValueTwo');

To get the history of a key, use the following syntax:

const store = new LocalStorageWrapper(3); // keep track of 3 previous values

store.set(localStorageProxy, 'yourKey', 'yourValueOne');
store.set(localStorageProxy, 'yourKey', 'yourValueTwo');
store.set(localStorageProxy, 'yourKey', 'yourValueThree');

console.log(store.getHistory('yourKey')); // ['yourValueOne', 'yourValueTwo', 'yourValueThree']

To listen global changes to all keys in the storage use the following syntax:

const store = new LocalStorageWrapper();

store.addGlobalChangeListener((key, newValue, oldValue) => {
    console.log('changed', key, newValue, oldValue);
});

To remove a change listener, use the following syntax:

const store = new LocalStorageWrapper();

store.clearChangeListeners('yourKey');

To get or set multiple keys, use the following syntax:

const store = new LocalStorageWrapper();

store.setMultiple({
    keyOne: 'valueOne',
    keyTwo: 'valueTwo',
    keyThree: 'valueThree',
});

store.getMultiple('keyOne', 'keyTwo', 'keyThree'); // { keyOne: 'valueOne', keyTwo: 'valueTwo', keyThree: 'valueThree' }

Direct usage with no wrapper ( not recommended )

import { localStorageProxy } from 'local-storage-proxy-wrapper';

To set a value, use the following syntax:

localStorageProxy.yourKey = 'yourValue';

To get a value, use the following syntax:

const yourValue = localStorageProxy.yourKey;

To delete a value, use the following syntax:

delete localStorageProxy.yourKey;

API

`constructor(historySize: number = 1)`

Creates an instance of LocalStorageWrapper.

Parameters

historySize: The number of previous values that should be stored in the history for each key. Default is 1.

`getHistory(key: string): ListenerValue[]`

Returns the history of changes for a given key, depending on the historySize passed to the constructor.

Parameters

key: The key to get the history for

Returns

An array of previous values that have been stored for the key.

`clearHistory(key: string): void`

Clears the history for a given key

Parameters

key: The key to clear the history for

`get(target: Storage, key: string)`

Gets the value for a given key from the storage.

Parameters

target: The storage to get the value from.
key: The key to get the value for.

Returns

The value for the given key from the storage.

`set(target: Storage, key: string, value: ListenerValue): boolean`

Sets the value for a given key in the storage.

Parameters

target: The storage to set the value in.
key: The key to set the value for.
value: The value to set.

Returns

true if the value was set successfully, false otherwise.

`addChangeListener(key: string, listener: ChangeListener): void`

Adds a change listener for a given key to observe changes in the storage for old and new values.

Parameters

key: The key to add the listener for.
listener: The listener function to add. The function is called with the new value , old value, and key as arguments.