DEV Community

Cover image for Satha - A localStorage wrapper
Siddhesh Mangela
Siddhesh Mangela

Posted on

Satha - A localStorage wrapper

#javascript #localstorage #store

Satha. An easy to use localStorage wrapper this post serves as an introduction to Satha.

Prerequisite

Install it from npm using

// npm npm i @satha/core // pnpm pnpm add @satha/core
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

This will create a localStorage entry

// localStorage name "satha-store-default" { "number-save": 1 }
Enter fullscreen mode Exit fullscreen mode

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

// get value const number = numberSave.get(); console.log(number);
Enter fullscreen mode Exit fullscreen mode

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

// set value numberSave.set((state) => state + 1);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Digging deeper

That's it for creating a simple localStorage entry.

want to dig deeper ?

Checkout Satha homepage for adavnced usage

https://satha.netlify.app/

Top comments (0)