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.

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.