What's local storage and how do I use it
March 02, 2022
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
1//Creating local storage item
2localStorage.setItem("key", value);
3
4//Getting local storage item
5const item = localStorage.getItem("key");
6
7//removing local storage item
8localStorage.removeItem("key");
9
10//removing every local storage item
11localStorage.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
1
2//create local storage
3const createKey = keyName => {
4
5 //check if the element already exist
6 if (!localStorage.getItem(keyName)) {
7 localStorage.setItem(keyName, JSON.stringify([]));
8 } else {
9 return;
10 }
11
12}
13
14//call this function
15
16createKey("keyName")
17As 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
1
2const addElement = (keyName, newElement) => {
3 const oldElements = JSON.parse(localStorage.getItem(keyName));
4 localStorage.setItem(keyName, JSON.stringify([...oldElements, newElement]));
5 return;
6};
7
8//call this function introduncing one string into the array, you can add a object if you want to
9
10addElement('keyName', "Test01")
11As 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.
1
2const getElements = keyName => {
3 return localStorage.getItem(keyName);
4};
5
6//call this function
7
8const elements = getElements("keyName");
9Deleting 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.
1
2const deleteElement = (keyName, id) => {
3 const oldElements = JSON.parse(localStorage.getItem(keyName));
4 const updatedElements = oldElements.filter(e => e !== id);
5
6 localStorage.setItem(keyName, JSON.stringify(updatedElements));
7};
8
9//call this function deleting Test01 from the keyName local storage item
10
11deleteElement("keyName", "Test01")
12So 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.