@blocdigital/uselocalstorage NPM

uselocalstorage

Handle interaction with local and session storage

Install

npm install --save @blocdigital/uselocalstorage

Usage

API

Function	Params	Description
init	\<T>(key: `string`, data: `unknown`) => `void`	Set the data, generally this should be an empty version of the data type
set	\<T>(key: `string`, data: `unknown`) => `void`	Set the data, generally you will need to get the data modify it then set it.
get	\<T>(key: `string`) => T \| `undefined`	Get the data.
remove	(key: `string`) => `void`	Remove a specific key and its contents.
clear	() => `void`	Remove all items from storage
addEventListener	(event: `EventType`, callback: (key?: `string`) => `void`) => `void`	Add as event listener for when this hook is used.
on	(event: `EventType`, callback: (key?: `string`) => `void`) => `void`	Pseudonym for addEventListener
onAny	(callback: (event?: `EventType`, key?: `string`) => `void`) => `void`	Add event listener, for all events, for when this hook is used
removeEventListener	(key: `string`, callback: (key: `string`) => `void`) => `void`	If you exactly match an addEventListener event you can remove it
off	(key: `string`, callback: (key: `string`) => `void`) => `void`	Pseudonym for removeEventListener
offAny	(callback: (key: `string`) => `void`) => `void`	If you exactly match an onAny function you can remove it

Example

import { useState, useEffect } from 'react';

// Hooks
import useLocalStorage from '@blocdigital/uselocalstorage';

const Example = () => {
  const [state, setState] = useState('hello world');

  // initiate the session storage
  const storage = useLocalStorage('session');

  // initialise the storage state
  useEffect(() => {
    storage.init('state', 'hello world');
  }, [storage]);

  // set up listeners to keep state in sync with storage
  useEffect(() => {
    const onStateChange = (key) => {
      if (key !== 'state') return;

      setState(storage.get(key));
    };

    storage.addEventListener('set', onStateChange);

    // remember to tidy up you event listeners
    return () => storage.removeEventListener('set', onStateChange);
  }, [storage]);

  return (
    <div>
      <span>Current state: {state}</span>
      <br />
      <button onClick={() => storage.set('state', String(Date.now()))}>Change State</button>
    </div>
  );
};