DEV Community

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

Posted on

2 3

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/

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay