You’d like to save arrays and objects to browser storage using JavaScript as an alternative to using cookies. Is there a way to do this?
There are a couple of ways to save arrays and objects to browser storage.
The Web Storage API allows us to store items in a more intuitive way using two mechanisms: localStorage
and sessionStorage
.
For both of these mechanisms:
JSON.stringify()
.JSON.parse()
.Let’s look at some code examples.
localStorage
APIThe localStorage
API maintains browser storage even when the browser is closed and reopened.
The code example below shows how the localStorage
API is used to store arrays:
const myArray = ['a', 'b', 'c', 'd']; // convert array to JSON string using JSON.stringify() const jsonArray = JSON.stringify(myArray); // save to localStorage using "array" as the key and jsonArray as the value localStorage.setItem('array', jsonArray); // get the JSON string from localStorage const str = localStorage.getItem('array'); // convert JSON string to relevant object const parsedArray = JSON.parse(str); console.log(parsedArray);
To save objects, replace myArray
with something like myObject
. We’ll use the sessionStorage
API to demonstrate saving objects for brevity.
sessionStorage
APIThe sessionStorage
API stores items for as long as the browser window is open, including page reloads and restores. The data is lost once the browser window is closed.
Here’s a code example to show how to use the sessionStorage
API to store objects:
const Person = { name: 'John Smith', age: 18, }; // convert object to JSON string using JSON.stringify() const jsonObject = JSON.stringify(Person); // save to localStorage sessionStorage.setItem('person', jsonObject); // get the JSON string from sessionStorage const str = sessionStorage.getItem('person'); // convert JSON string to valid object const parsedObject = JSON.parse(str); console.log(parsedObject);
To remove items from local and session storage, use the removeItem()
method, giving it the key, as follows:
localStorage.removeItem('array'); sessionStorage.removeItem('person');
The local and session storage can also be cleared using clear()
:
localStorage.clear(); sessionStorage.clear();