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)

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!