localStorage is a web storage object that allows us to persist data in the browser. The data, which must be of type string, is saved as a key/value pair.
localStorage only stores strings, how do we store data of other types, like arrays or objects? That’s what this article is about. We will learn how to store an array data structure in
To store an array in
localStorage, we use JSON methods
stringfy(): converts an array into a string
parse(): parses a string and constructs an array
Should you wonder why we need to use these two methods, remember these two points:
localStorageonly stores strings, so you have to stringify (or convert into a string) your array before saving it
- when you retrieve your data from the
localStorage, you’ll get a string. In order to manipulate it, you need to convert it back into an array
Let’s now move on to implementation. But before that, we need to know what we want to implement.
The functionality we want to implement is very simple. It consists of saving some chapters from the Bible Book of Genesis. No, it’s not a complete CRUD app we want to build here. We’ll only focus on creating (store/save) and reading. For that,
localStorage provides respectively
setItem(key, value) and
First, let’s declare the list of our chapters.
const chapters = [1, 25, 32, 33, 45, 46]
Next, we stringify
The array becomes a string and is ready to be stored in the browser’s local storage.
Store in localStorage
const chapters = [1, 25, 32, 33, 45, 46] localStorage.setItem('genesis', JSON.stringify(chapters))
Nothing special here. We store our stringified chapters with the key
To see the
localStorage in action, run the code above in the console of your browser. After doing that, go to the Storage tab and click on the Local Storage (Firefox).
You should see an array of integers, as shown in the image below.
Read from localStorage
From your console, read the stored data thanks to it key
const arr = localStorage.getItem('genesis') // localStorage.genesis console.log(arr) // "[1,25,32,33,45,46]"
The returned value is a string rather than an array as we might expect. Let’s now parse it and see how it becomes an array.
JSON.parse(arr) console.log(arr) // [1,25,32,33,45,46]
That’s all. Let’s put it all together and improve the code.
// store chapters array as a string const chapters = [1, 25, 32, 33, 45, 46] localStorage.setItem('genesis', JSON.stringify(chapters)) // read the stringified data converted to an array const selectedChapters = JSON.parse(localStorage.getItem('genesis'))
So far, we learned how to work with array data types and local storage. The
localStorageweb storage API that only store strings. It has the
getItem()methods to respectively store to and read from the local storage. Now comes to our main question: how do we store non string data type?
In order to store an array (or an object) data type, the tip is to use
stringfy()method. Then if you want to read a strongfied value, you’ll have to parse it with
That’s all for today!