How to use LocalStorage to store data in the browser

Tram Ho

Storing data in the browser is something we often do when building web applications. Usually, we need to store some temporary data related to the processing logic or make the user experience better. To do this, we can use localStorage

With localStorage, we store data in the browser as strings. It is a means of storing data through the “keys” ***, allowing us to retrieve data through these “keys” . If a piece of data is not a string, it will be converted to a string before being stored.

Saving Data

We can use the setItem method to save data to the browser’s local memory. There will be two arguments required for this process. The first argument is a string that is the key of the data and the second argument is a string of the corresponding key value we passed into the first argument.

It sounds roundabout, but if you look at the example below we will easily grasp dc:

You can check if it has been saved by pointing to the browser’s Apllication tab, checking the localStorage section.

You can also write …

… to store data

The “[]” symbol can also work to assign values ​​to local memory. For example, we can write …

To store data in localStorage with key ‘foo’ and value is ‘bar’

Saving object data

If you want to store an object, we will take [object Object] as a value. To save the content, we will use the JSON.stringify method. For example, instead of writing:

… we would write:

Now, “foo”: “bar”} is a value stored in localStorage with the key foo

Repeated calling

If we repeatedly call the setItem method with the same key, the current key value will be overwritten. For example, if we write:

Then, the value of the key foo will be 2 because it will be the last value set for the stored key foo .

Getting Data

We can get the data by getItem method or use the symbol '.' to retrieve data as any object. getItem will retrieve the value for the key stored in localStorage. It will return a string containing either null or value

We can write:

We will get the value corresponding to the key foo , if not, we will get a null value

We can also write in other syntax to get the value corresponding to the specified key. Eg:

There is also a method to get the key’s name in localStorage with its index. The input value is an integer corresponding to the location to retrieve. The first position is numbered 0. For example:

Will return the name of the key standing at position 2 in localStorage.

Removing a Single Entry in Local Storage

You can delete an item in localStorage by providing its key for the removeItem method.

For example, if we want to delete an entry with the key 'foo' , we would write:

The above code will remove an element in localStorage with the key name 'foo'

Alternatively, we can use delete to remove an element via the key name. For example, we can delete an entry with the key 'foo' with the syntax:

Clearing Local Storage

We can use the clear() to delete all entries in localStorage

By using this syntax, all localStorage data in the browser will be erased


Above are some sharing about localStorage and how to use it. LocalStorage is highly applicable, often used in projects. Hopefully this article will help you in your part to reach localStorage


Share the news now

Source : Viblo