Satha. An easy to use localStorage wrapper inspired by state management systems.

This post serves as an introduction to Satha.

Prerequisite

Install it from npm using

// npm
npm i @satha/core

// pnpm
pnpm add @satha/core

Create a local storage store

Here we will create a store to keep a numeric value let's call it "numberSave"

import { useStorage } from '@satha/core';

const numberSave = useStorage('number-save', 1);

This will create a localStorage entry

// localStorage name "satha-store-default"

{
"number-save": 1
}

useStorage comes with get method which can be used to get value.

// get value
const number = numberSave.get();

console.log(number);

It also has a set method that takes a callback function as the only parameter. The callback will have a state which can be altered and returned.

// set value
numberSave.set((state) => state + 1);

Sub link hack

If you are using sub links e.g. github pages then there is a possibility of local storage conflict. Add following code before initializing "useStorage"

import {
  createLocalStorage,
} from '@satha/core';

// use unique name for each site
createLocalStorage('satha-store-001', { defaultStorage: true });

// after this useStorage can be used

That's it for creating a simple localStorage entry.

want to dig deeper?

Checkout Satha homepage for advanced usage