Web Storage API

Local Storage

local storage same as session storage for a particular Web Site allows you to store, read, add, modify, and delete data items for that domain.

But data is stored with no expiration date, and will not be deleted when the browser is closed. The data will be available for days, weeks, and years.

• Stores data with no expiration date, and gets cleared only through JavaScript, or by clearing the Browser cache / Locally Stored Data.

  (It clears in a "private browsing" or "incognito", when the last "private" tab is closed.)

• Storage limit is the maximum amongst the two. (5 MiB) per origin.

Syntax

This code accesses the current domain's local Storage object and adds a data item to it using Storage.setItem().

localStorage.setItem("myCat", "Tom");

Syntax for reading the localStorage item:

const cat = localStorage.getItem("myCat");
console.log(cat);

The syntax for removing the localStorage item:

localStorage.removeItem("myCat");

The syntax for removing all the localStorage items:

localStorage.clear();

---

Other Examples:

const person = { name: "Alex" };
localStorage.setItem("user", person);
console.log(localStorage.getItem("user")); // "[object Object]"; not useful!
localStorage.setItem("user", JSON.stringify(person));
console.log(JSON.parse(localStorage.getItem("user"))); // { name: "Alex" }

Session Storage

sessionStorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores).

• Stores data only for a session, meaning that the data is stored until the browser (or tab) is closed.
• Data is never transferred to the server.
• Storage limit is larger than a (4096 Byte Cookie) (at most 5 MiB) per origin.

Syntax

Save data to sessionStorage

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

Get saved data from sessionStorage

let data = sessionStorage.getItem("key");

Remove saved data from sessionStorage

sessionStorage.removeItem("key");

Remove all saved data from sessionStorage

sessionStorage.clear();

---

Other Example:

Saving text between refreshes

The following example autosaves the contents of a text field, and if the browser is refreshed, restores the text field content so that no writing is lost.

// Get the text field that we're going to track
let field = document.getElementById("field");

// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if (sessionStorage.getItem("autosave")) {
    // Restore the contents of the text field
    field.value = sessionStorage.getItem("autosave");
}

// Listen for changes in the text field
field.addEventListener("change", () => {
    // And save the results into the session storage object
    sessionStorage.setItem("autosave", field.value);
});