This content originally appeared on DEV Community and was authored by Vishal Yadav
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
This content originally appeared on DEV Community and was authored by Vishal Yadav
Vishal Yadav | Sciencx (2024-09-12T04:57:49+00:00) Understanding Local Storage in JavaScript. Retrieved from https://www.scien.cx/2024/09/12/understanding-local-storage-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.