DEV Community

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

Posted on

Satha - A localStorage wrapper

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)