DEV Community

Saurja Ghosh
Saurja Ghosh

Posted on

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');
Enter fullscreen mode Exit fullscreen mode

To read entries, use the getItem()

let myItem = localStorage.getItem(key);
Enter fullscreen mode Exit fullscreen mode

Updating an entry is done with the setItem()

localStorage.setItem(key, 'New Value');
Enter fullscreen mode Exit fullscreen mode

3. Deleting and Clearing Entries

Delete an entry with the the removeItem() method

localStorage.removeItem(key);
Enter fullscreen mode Exit fullscreen mode

To clear everything that’s stored in localStorage, can be done with the clear() method

localStorage.clear();
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode

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) {
  // ...
}
Enter fullscreen mode Exit fullscreen mode

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}`);
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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)