H5 local storage

HTML5 local storage: better than cookies

[What is HTML local storage? 】

With Local Storage, web applications can store data locally in the user's browser.

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

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

Local storage via origin (via domain and protocol). All pages, from the point of origin, are able to store and access the same data.

[HTML local storage object]

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

① window.localStorage - stores data with no expiration date

② window.sessionStorage - stores data for a session (data will be lost when the browser tab is closed)

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

if (typeof(Storage) !== "undefined") {
    // code for localStorage/sessionStorage
    alert("Support H5 local cache")
} else {
    // Feel sorry! Web Storage is not supported..
    alert("H5 local cache is not supported")
}

① localStorage object

The localStorage object stores data with no expiration date. Data is not deleted when the browser is closed and is available for the next day, week or year

<div id="result"></div>
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("lastname", "Gates");
    // Retrieve
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
    document.getElementById("result").innerHTML = "Sorry! Your browser does not support Web Storage...";
}
</script>

Example explanation:

1. Create a localStorage name/value pair where: name="lastname", value="Gates"

2. Retrieve the value of "lastname" and insert it into the element with id="result"

The above example can also be written like this:

// store
localStorage.lastname = "Gates";
// retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

The syntax to delete 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 a button. In the code, the value string is converted to a number, which in turn increments the count:

<script>
function clickCounter () {
    if(typeof(Storage) !== "undefined") {
        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.";
    } else {
        document.getElementById("result").innerHTML =
             "Sorry! Your browser does not support Web Storage...";
    }
}
</script>
<p><button onclick="clickCounter()" type="button">Click here! </button></p>
<div id="result"></div>
<p>Click the button to increment the counter. </p>
<p>Please close the browser or tab and try again, the counter will continue to count (it will not reset). </p>

② sessionStorage object

The sessionStorage object is identical to the localStorage object, except that only one session stores data. The data is also deleted if the user closes the specific browser tab.

The following example counts user clicks on a button in the current session:

<script>
function clickCounter () {
    if(typeof(Storage) !== "undefined") {
        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.";
    } else {
        document.getElementById("result").innerHTML =
            "Sorry! Your browser does not support Web Storage...";
    }
}
</script>
<p><button onclick="clickCounter()" type="button">click here</button></p>
<div id="result"></div>
<p>Click the button to increment the counter. </p>
<p>Please close your browser or tab and try again, the counter will reset. </p>

Guess you like