INFO PAGE

Client Data

Background

In the past we have used cookies to store data on the user's computer. This is used to store the state of an application or for personalization - like remembering the user's name. Only the site that saves the cookie can read the cookie - oh, and user can see it and delete it. We can still use cookies, but HTML 5 gives us new ways called sessionStorage and localStorage. See code for examples of each.

The sessionStorage will expire once the user closes all browsers. The localStorage persists across closed browser windows and can be cleared programatically or by the user.

JSON - JavaScript Object Notation

Sometimes we want to keep our data objects like arrays and object literals and use them the next time we load the page. Yet our storage tends to store only strings. So JSON lets you easily turn data objects into a string for storage and then turn them back into objects on retrieval! For example:

let myData;
if (localStorage && localStorage.data) {
    myData = JSON.parse(localStorage.data);
} else {
    myData = [10, 30, {biggest:300, smallest:100}]; // some default
    if (localStorage) localStorage.data = JSON.stringify(myData);
}
console.log(myData[2].smallest);

// myData could be changed in app by user input and then set again with:
// (these days, we probably do not need to test for localStorage)
if (localStorage) localStorage.data = JSON.stringify(myData);

Cookies

JSON and localStorage