Local Storage API, Storing and Retrieving Simple Data, Arrays, Associative Arrays, and Objects

localStorage

There are two types when of the storage property and that is localStorage and sessionStorage. Both behave fairly similar, but the differences between the two are that data for sessionStorage is wiped out clean after a session while the data in localStorage can continue on into multiple sessions, it does not have an expiration date nor will the data go away when you close the browser. Years ago, storage was only possible through cookies. A good example of localStorage propterties is the online shopping cart on all online shopping sites like Amazon, Walmart, and thousand of others. You can add items to your cart and continue shopping throught the site and when you return to the cart, all the items are still there until you delete the items or make your purchase.

Syntax

To save data
localStorage.setItem("itemName", "value")
Example:

localStorage.setItem("username", "Walter");

To access stored data
alert("itemName = " = localStorage.getItem("itemName"));
Example:

alert("username = " + localStorage.getItem("username"));
The alert output would be "username = Walter"

Objects

In this example, we create an API object. We set the itemName and the value. Here we create an own object and store it. Type your favorite color and retrieve it by clicking the Display button after clicking the Save Color button.
Favorite Color:
Now retrieve your favorite color from local storage with the button below.

Arrays

The same is done with Arrays, but since local storage only supports strings we convert the array into a string by using JSON.stringify(), and then reverse the process using JSON.parse. Here we create an array by allwong the user to choose five favorite colors.
0:
1:
2:
3:
4:

Now, type the index number in the field below to see which item you want to see from the new array. Remember Arrays are numbered with the first item as number 0. (choose 0,1,2,3,4)

Associative Arrays

Associative Arrays are arrays with names instead of numbers assigned to each value. Lets build an associative array right now. Lets make a list of your favorites.
Name:
Food:
Music:
Movie:
Insect:

Now lets display your associative array. Just click the button to see the stored result.

Name:

Food:

Music:

Movie:

Insect: