Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to use HTML5 Web storage localStorage and sessionStorage for local storage of Web page data, with a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

LocalStorage and sessionStorage methods of HTML5 Web storage are used for local storage of Web page data.

The page reference is shown in the following figure, which can store the data on the page locally. And can read the stored data and display it on the page.

LocalStorage (local storage), can store data for a long time, no time limit, one day, one year, two years or more, the data can be used.

SessionStorage (session Storage), which is used only before the browser is closed, is agreed to be used when another page is created, and the data disappears after closing the browser.

The test localStorage compatibility of a blogger is as follows:

Chrome4+ begins to support localStorage

Firefox3.5+ begins to support localStorage

Firefox1.5+ supports globalStorage

IE8+ supports localStorage

IE7 compatibility mode supports localStorage

IE5.5+ supports userdata

Safari 4 + supports localStorage

Opera10.5+ supports localStorage

The code is as follows:

Textarea {

Width: 300px

Height: 300px

}

.button {

Width: 100px

}

/ / use localStorage and sessionStorage methods of HTML5 Web storage for local storage of Web page data.

/ / the page reference is shown in the following figure, which can store the data on the page locally. And can read the stored data and display it on the page.

Function saveSession () {

Var T1 = document.getElementById ("T1")

Var T2 = document.getElementById ("T2")

Var mydata = t2.value

Var oStorage = window.sessionStorage

OStorage.mydata = mydata

T1.value + = "sessionStorage save mydata:" + mydata + "\ n"

}

Function readSession () {

Var T1 = document.getElementById ("T1")

Var oStorage = window.sessionStorage

Var mydata = "does not exist"

If (oStorage.mydata) {

Mydata = oStorage.mydata

}

T1.value + = "sessionStorage read mydata:" + mydata + "\ n"

}

Function cleanSession () {

Var T1 = document.getElementById ("T1")

Var oStorage = window.sessionStorage

Var mydata = "does not exist"

If (oStorage.mydata) {

Mydata = oStorage.mydata

}

OStorage.removeItem ("mydata")

T1.value + = "sessionStorage clear mydata:" + mydata + "\ n"

}

Function saveStorage () {

Var T1 = document.getElementById ("T1")

Var T2 = document.getElementById ("T2")

Var mydata = t2.value

Var oStorage = window.localStorage

OStorage.mydata = mydata

T1.value + = "localStorage save mydata:" + mydata + "\ n"

}

Function readStorage () {

Var T1 = document.getElementById ("T1")

Var oStorage = window.localStorage

Var mydata = "does not exist"

If (oStorage.mydata) {

Mydata = oStorage.mydata

}

T1.value + = "localStorage read mydata:" + mydata + "\ n"

}

Function cleanStorage () {

Var T1 = document.getElementById ("T1")

Var oStorage = window.localStorage

Var mydata = "does not exist"

If (oStorage.mydata) {

Mydata = oStorage.mydata

}

OStorage.removeItem ("mydata")

T1.value + = "localStorage clear mydata:" + mydata + "\ n"

}

Data that needs to be saved:

Thank you for reading this article carefully. I hope the article "how to use the localStorage and sessionStorage methods of HTML5 Web storage for local storage of Web page data" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.