How to use localStorage in JavaScript

If you are a developer looking to get into the world of .NET, you need to know what's possible. Since .NET Framework is the most popular technology in the .NET ecosystem, you can use it to build a wide variety of applications, but recently, something new has emerged, such as .NET Core and .NET Standard library. Can we use it in our project or build?

The localStorage object is one of the most widely used objects in web programming. It provides a simple solution for storing key-value pairs locally on the user's computer.

Most web developers prefer the localStorage API because it has a simple syntax and can store up to 5MB of data.

In addition, the latest versions of all major browsers support the Web Storage API, which includes localStorage and sessionStorage. Only Opera Mini does not support the webstorage API.

You can quickly verify that your browser supports the webstorage API by opening Chrome DevTools. Navigate to the Console, type the following code snippet, and press Enter.

typeof(Storage)

If you receive an undefined , then your browser does not support the webstorage API. If your browser supports it then you should see "feature".

This article explores the following questions:

• What is localStorage?
• What is the difference between localStorage and sessionStorage?
• How to perform CRUD operations using localStorage API
• What are the pitfalls of common local storage?
• What are the limitations of localStorage?

What is localStorage?

As mentioned before, the localStorage object is part of the webstorage API natively supported by browsers. This is a simple yet effective key/value storage solution.

For web developers, the biggest benefit of using the localStorage object is offline storage. Most importantly, we don't lose data when the user closes the browser or restarts the computer. Websites can use the localStorage API to read data stored locally on a user's computer even after the computer has been restarted.

This solution provides several interesting use cases for web developers.

• Store user settings for websites offline
• Keep user search history
• Keep items in cart

Next, let's compare localStorage and sessionStorage.

What is the difference between localStorage and sessionStorage?

Although the two APIs appear to be identical, there are subtle differences in how they are implemented.

The localStorage API is used to store data locally. Therefore, when the user refreshes the tab, closes the browser, or restarts the computer, the locally saved data is not lost. It is an ideal solution for long-term storage of essential data.

The sessionStorage API survives a page refresh, but only works within the same tab.

In short, pay attention when choosing a storage solution for your application. For example, it is best practice to store user settings information in localStorage. In contrast, sessionStorage is best suited for storing data for a specific session.

How to perform CRUD operations using localStorage API

This section shows you how to use the localStorage API to add, read, update, or delete. Building on this, I’ll show you a trick to clear localStorage for a specific page.

First, let's create a new key-value pair in the localStorage object. The setItem function accepts a key and its value. Choose an appropriate name for the key as you may want to use this key name to retrieve again.

localStorage.setItem('my-key', 'some-value')

Now let's retrieve the newly created object again.

let item = localStorage.getItem('my-key')

console.log(item) // Output: "some-value"

It's very simple. Let's go ahead and update the value of my-key. Note that we use the same setItem function to overwrite its value.

localStorage.setItem('my-key', 'new-value')

Finally, let's delete this key. The removeItem function accepts one parameter, which is the key you want to remove.

localStorage.removeItem('my-key')

To make sure we have removed all the keys, let's use the clear function to clear all the content of our app stored in localStorage.

localStorage.clear()

Now we are ready for more advanced localStorage operations.

Advanced localStorage Operations: Traversal

Let's look at the methods used to iterate over the localStorage object and look up keys.

The first method uses the most direct for loop. Note that we can use the length property directly on the localStorage object.

for(let i=0; i<localStorage.length; i++) {
 let key = localStorage.key(i)
 console.log(`${key} with value ${localStorage.getItem(key)}`)
}

We can also directly use the key method to retrieve the corresponding key.

for (let i = 0; i < localStorage.length; i++){
 let key = localStorage.key(i)
 console.log(key)
}

Next, let’s look at the pitfalls to avoid when using the localStorage API.

Common pitfalls of localStorage

Let's look at two of the most common gotchas when interacting with the localStorage API.

First, try storing a JSON object. The localStorage API is designed as a key-value storage. Therefore, this value only accepts strings, not objects. However, this does not mean that we cannot store objects. We need to serialize it into a string.

const dinner = { apples: 5, oranges: 1 }
localStorage.setItem('my-dinner', JSON.stringify(dinner))

When reading the serialized object, we need to parse it into JSON again.

let dinner = JSON.parse(localStorage.getItem('my-dinner'))

Second, try storing a boolean value. Likewise, the localStorage API only supports strings. Be careful when storing boolean values.

Fortunately, the solution is similar to storing a JSON object. When storing a boolean value, the setItem function will convert it to a string like this - "true". To read a boolean value with a string, we can use the JSON.parse method to convert it back to a boolean value.

let myBool = JSON.parse(localStorage.getItem('my-bool'))

Limitations of localStorage

Here's a quick review of the limitations of localStorage.

• String-based storage
• Most browsers have limited storage space, up to 5 MB
• The main thread is blocked when trying to store the huge string. Make sure not to update the same key at the same time as this will cause problems. In this case, it's best to look for an alternative storage solution, as the localStorage API is not designed for this purpose.
• Web worker or web service cannot access localStorage
• There is no built-in safety mechanism. Therefore, we do not recommend storing passwords or authentication-related data. Anyone with access to the user's browser can open a page and read the information stored in localStorage, just like a publicly available computer in a library.
  

This is the end of this article on how to use localStorage in JavaScript. For more information on how to use localStorage in JavaScript, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!