What's local storage and how do I use it

Local storage is a very useful browser API. In this post, I'm going to show you how you can use this API and how do I use it.

What's local storage

Local storage is a system that provides the ability to save information in the user's browser. Local storage can be used in an infinite amount of ways. But normally local storage is used for storing things like Json Web Tokens (JWT) or style configs for example.

You can also use local storage to store data generated by the user. For example, if you want to build a bookmarks board. Instead of saving those links into a database, you can store them locally.

How do I use local storage ?

The first thing I like to do is create a utils folder for my project. In this folder, I'm going to add my local storage handle file. Why a local storage handler if the browser provides its own API? Well because I want to store JSON into local storage. Local storage provides a key-value "database" and I'm going to use one key to store an array of JSON objects.

Using local storage API

//Creating local storage item
localStorage.setItem("key", value);

//Getting local storage item
const item = localStorage.getItem("key");

//removing local storage item
localStorage.removeItem("key");

//removing every local storage item
localStorage.clear();

These are the operations you can do with the browser API. But I'm going to show you some tricks I use in order to get more from local storage.

I want to be able to create an item only if there isn't one already in the browser. I do also want to be able to update the array that I created into the item with new elements. And last, I want to be able to delete an element from the array.

Creating the Item


//create local storage
const createKey = keyName => {

    //check if the element already exist
    if (!localStorage.getItem(keyName)) {
        localStorage.setItem(keyName, JSON.stringify([]));
    } else {
        return;
  }

}

//call this function 

createKey("keyName")

As you can see I'm using JSON.stringify() to convert the array to a sting, as the local storage can't store arrays or objects.

Adding new elements


const addElement = (keyName, newElement) => {
    const oldElements = JSON.parse(localStorage.getItem(keyName));
    localStorage.setItem(keyName, JSON.stringify([...oldElements, newElement]));
    return;
};

//call this function introduncing one string into the array, you can add a object if you want to

addElement('keyName', "Test01")

As you can see now I'm using JSON.parse() in order to convert the string again to an array.

Getting the elements

This is a simple one, im going to simply get the item and transform its value to an array.


const getElements = keyName => {
    return localStorage.getItem(keyName);
};

//call this function 

const elements = getElements("keyName");

Deleting items from the array

Now the most "complex" part, deleting an item from the array. This is complex as it varies from project to project. In this case, I'm simply going to filter the string from the array and update the local storage to save the filtered array.

But you can do this with a object prop, for example its ID. That's what i usualy do for my projects.


const deleteElement = (keyName, id) => {
    const oldElements = JSON.parse(localStorage.getItem(keyName));
    const updatedElements = oldElements.filter(e => e !== id);

    localStorage.setItem(keyName, JSON.stringify(updatedElements));
};

//call this function deleting Test01 from the keyName local storage item 

deleteElement("keyName", "Test01")

So that's all, as you can see local storage can be handy in a lot of situations. And knowing how to use it can help a lot when needing to choose between one or another way of solving one problem. Using this pattern you could easily use local storage as a mini "database" for some of your projects.