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

Zoom

Link List

Videos

API

An API allows you to pull data from another website to use in your own site or in an application. The following data is pulled from the NYT Books List API. It lists the first ten categories of books in the API.

let books = new XMLHttpRequest();
books.open('GET', bestBooks);
books.send();
books.onload =  function () {
    let booksInfo = 
    JSON.parse(books.responseText);
    var category = "";
    for (var i = 0; 
        i < booksInfo.results.length; 
        i++) {
        category += 
            booksInfo.results[i].display_name 
            + "<br>";
    }
    document.getElementById("bookCategories")
        .innerHTML = category;
}

Star Wars Categories from API

What is Web Storage?

Web Storage is where you store data on the a user's browser instead of on the server. The two types of storage are local and session storage. Local storage saves the data in the user's browser with no expiration date. Session storage saves the data until the current session is ended Data is stored using key:value pairs. Data can only be saved as strings. Examples of where you might use it are to to remember a username, a term last searched, remember previous checkbox configurations, load HTML content onto page so it is faster to load if reloaded,

Local Storage

There are several methods you can use for local storage: setItem, getItem, key, length, removeItem, and clear.

localStorage.setItem("key", "value");

localStorage.getItem("key", "value");

localStorage.key(index);

localStorage.length;

localStorage.removeItem("key");

localStorage.clear();

Session Storage

Both session and local storage use the same methods.

sessionStorage.setItem("key", "value");
sessionStorage.getItem("key", "value");
sessionStorage.key(index);
sessionStorage.length;
sessionStorage.removeItem("key");
sessionStorage.clear();

Storing and Retrieving Different Types of Data

Simple Data

Single inputs can be added to or changed and saved into localStorage using <input> or <textarea>.

Stored data is retrieved or removed:

Arrays

Store array in local storage:

Retrieve index 0 from array:

Example Code

var user = ["Tyler", "Braden", "Mary"];
var stringifyUsers = JSON.stringify(user);
sessionStorage.setItem("users", stringifyUsers);
document.getElementById("userArray").innerHTML = 
    sessionStorage.getItem("users");
var retrieveUser = 
    JSON.parse(sessionStorage["users"])
document.getElementById("retrieveIndex").innerHTML 
    = retrieveUser[0];

Associative Arrays

These types of arrays are written like an object but referenced similar to an array, but with the key name instead of index number.

Objects

Objects must be turned into strings in order to be viewed in localStorage in the inspect dashboard.

Example Code

var person = {
    firstName : "Mary", 
    lastName : "Allen", 
    age : "20"};

var personString = JSON.stringify(firstPerson);
sessionStorage.setItem("newPerson", personString);
document.getElementById("storeObj").innerHTML = 
    sessionStorage.getItem("newPerson");