Understanding Local Storage in JavaScript

#webdev #javascript #beginners #programming

Local Storage is an essential browser-based API that allows developers to store, retrieve, and manage data directly in the browser. Unlike session storage, Local Storage persists even after the browser is closed, making it ideal for saving user preferences, app settings, or any kind of data that needs to stick around between sessions. However, it’s important to note that the data is limited to the browser in which it’s stored. For instance, data saved in Chrome won’t be available in Firefox.

How Local Storage Works

Before working with Local Storage, it's important to understand that it stores data in JSON format. This means that if you're saving a JavaScript object, you'll need to convert it into JSON first, and convert it back to a JavaScript object when retrieving the data.

Here’s an example:

const user = {
  name: "AliceDoe"
};
const userToJSON = JSON.stringify(user); // Convert object to JSON

Viewing Local Storage in Your Browser

You can view and interact with the data stored in Local Storage using your browser’s Developer Tools. Here's a quick guide:

Right-click on any webpage and select "Inspect" or press F12.
Open the Application tab.
In the left panel, find Local Storage under the storage section, and you'll see your stored data displayed as key-value pairs.

Creating a New Record in Local Storage

To store data in Local Storage, follow these steps:

const user = {
  name: "AliceDoe"
};

const userToJSON = JSON.stringify(user); // Convert to JSON
localStorage.setItem("user", userToJSON); // Save the item

In this example:

The key is "user".
The value is the stringified object in JSON format.

Reading Data from Local Storage

When you retrieve data from Local Storage, you'll need to convert the JSON string back into a JavaScript object:

const userJSON = localStorage.getItem("user"); // Retrieve data
const userObject = JSON.parse(userJSON); // Convert back to JS object
console.log(userObject); // { name: "AliceDoe" }

Updating Existing Data in Local Storage

Updating data in Local Storage is similar to creating a new record—essentially, you overwrite the old data:

const updatedUser = {
  name: "AliceDoe",
  age: 25
};

const updatedUserJSON = JSON.stringify(updatedUser);
localStorage.setItem("user", updatedUserJSON); // Overwrite the record

Deleting Data from Local Storage

Finally, to remove a record from Local Storage, you can use the removeItem method:

localStorage.removeItem("user"); // Remove the "user" record

This will delete the record associated with the "user" key.

Conclusion

Local Storage is a powerful, easy-to-use tool for client-side data persistence in JavaScript. By understanding how to create, read, update, and delete records, you can store important data that persists across browser sessions, enhancing the user experience. However, it’s also important to remember that Local Storage is limited to a specific browser and domain, and it should not be used for sensitive data, as it’s not encrypted.

By incorporating Local Storage into your applications, you can improve their functionality without needing a full backend solution for certain tasks.

Citations:

MDN Web Docs, "LocalStorage", https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Top comments (8)

Samuel Rouse • Sep 12 • Edited

Thanks for the article. I especially appreciate the considerations mentioned in your conclusion!

Some other things to think about for those who might explore the Storage APIs more.

Storage is also a convenient way to coordinate between multiple tabs/windows for a user! The storage event will tell a page when another context – page, tab, etc. – makes changes.
There are browser/environment limits on Storage – typically 5 MB – after which storage will throw a QuotaExceeded error when using .setItem(). I have had to work around this limitation in specific scenarios where third-party services stored substantial amounts of data in storage – a bad practice, but one you might run into.