The two great tools for saving key/value pairs locally are local storage and session storage. Today we will look into the theory and practical code and make it simplified enough for everyone to understand.
1. Understanding localStorage vs sessionStorage
- SessionStorage, the data, is persisted only until the window or tab is closed.
- LocalStorage, the data is persisted until the user manually clears the browser cache or until your web app clears the data
2. Creating, Reading, and Updating Entries
Create entries for the localStorage object by using the setItem() method.
let key = 'Item 1';
localStorage.setItem(key, 'Value');
To read entries, use the getItem()
let myItem = localStorage.getItem(key);
Updating an entry is done with the setItem()
localStorage.setItem(key, 'New Value');
3. Deleting and Clearing Entries
Delete an entry with the the removeItem() method
localStorage.removeItem(key);
To clear everything that’s stored in localStorage, can be done with the clear() method
localStorage.clear();
4. Storing Non-String values with JSON
LocalStorage can only store string values. If you want to store objects or arrays as values in localStorage, you can use JSON.stringify() to convert them into strings.
let myObj = { name: 'Skip', breed: 'Labrador' };
localStorage.setItem(key, JSON.stringify(myObj));
Although myObj is an object, JSON.stringify(myObj) converts it into a string. So myObj is now a valid localStorage value.
To read and return stringified values, use the JSON.parse() method. The JSON.parse() method takes JSON strings and converts them into JavaScript objects.
let item = JSON.parse(localStorage.getItem(key));
5. Checking for Items
Like to test for the presence of items in the localStorage. You can use if statements to check if localStorage is holding items or if it is empty.
if (localStorage.length > 0) {
// ...
}
6. Iterating Over Items
The localStorage and sessionStorage objects don’t support the forEach method. To iterate over the items in localStorage, use a for loop
for (let i = 0; i < localStorage.length; i++){
let key = localStorage.key(i);
let value = localStorage.getItem(key);
console.log(`Key: ${key} | Value: ${value}`);
}
7. Checking for Support
You can test for localStorage support by checking if it’s available on the window object using an if statement:
if (window.localStorage) {
// localStorage supported
}
Conclusion
We can use the localStorage
or sessionStorage
objects to store key/value pairs. There are methods that enable you to interact with the items within localStorage
. With this tutorial, you created, removed, and updated entries within localStorage
. You also converted array and object data into strings and back using JSON methods.
At times, it may be best to use cookies instead of localStorage
or session
.
Top comments (0)