HTML local storage

HTML local storage: better than cookies.

What is HTML local storage?

Through local storage (Local Storage), web applications can store data locally in the user's browser.

Before HTML5, application data could only be stored in cookies, including each server request. Local storage is more secure and can store a large amount of data locally without affecting website performance.

Unlike cookies, storage limits are much larger (at least 5MB), and information is not transmitted to the server.

Local storage is via the origin (origin) (via domain and protocol). All pages, from the origin, can store and access the same data.

Browser Support

The array in the table indicates the first browser version that fully supports local storage.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

HTML local storage objects

HTML local storage provides two objects for storing data on the client side:

  • window.localStorage - stores data without an expiration date
  • window.sessionStorage - stores data for a session (the data is lost when the browser tab is closed)

When using local storage, please check the browser support for localStorage and sessionStorage:

if (typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage
} else {
    // Sorry! Web Storage is not supported ..
}

localStorage object

The localStorage object stores data without an expiration date. When the browser is closed, the data is not deleted, and it is available the next day, week, or year.

Example

// Store
localStorage.setItem("lastname", "Gates");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Try It Yourself

Example Explanation:

  • Create a localStorage name/value pair where: name="lastname", value="Gates"
  • Retrieve the value of "lastname" and insert it into the element with id="result"

The example can also be written as follows:

// Store
localStorage.lastname = "Gates";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

The syntax for deleting the "lastname" localStorage item is as follows:

localStorage.removeItem("lastname");

Note: Name/value pairs are always stored as strings. Remember to convert them to other formats if needed!

The following example counts the number of times the user clicks the button. In the code, the value string is converted to a number, and the count is incremented sequentially:

Example

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked this button " +
localStorage.clickcount + " times.";

Try It Yourself

sessionStorage Object

The sessionStorage object is equivalent to the localStorage object, the difference is that it only stores data for one session. If the user closes a specific browser tab, the data will also be deleted.

The following example counts the number of times the user clicks the button in the current session:

Example

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "In this session, you have clicked this button " +
sessionStorage.clickcount + " times.";

Try It Yourself