17
loading...
LocalStorage: Clearing the clutter...
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.
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');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();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));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) {
// ...
}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}`);
}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
}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.