Comments: LocalStorage (local storage), which can store data for a long time without time limit. data can be used for one day, one year, two years, or even longer. sessionStorage (Session storage ), it can be used only before the browser is closed. The data disappears after the browser is closed.
Use localStorage and sessionStorage of HTML5 Web storage to locally store Web page data.
For page reference, you can store data locally on the page. The stored data can be read and displayed on the page.
LocalStorage (Local Storage) can store data for a long time without time restrictions. data can be used for one day, one year, two years, or even longer.
SessionStorage (Session storage) is only used before the browser is closed. It is allowed to be used when another page is created. After the browser is closed, the data disappears.
The localStorage compatibility test of a blogger is as follows::
Chrome4 + began to support localStorage
Firefox3.5 + began 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:
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> </title>
<Style type = "text/css">
Textarea {
Width: 300px;
Height: 300px;
}
. Button {
Width: 100px;
}
</Style>
</Head>
<Body>
<Script type = "text/javascript">
// Use localStorage and sessionStorage of HTML5 Web storage to locally store Web page data.
// For page reference, you can store data on the page locally. The stored data can be read and displayed 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 saves mydata:" + mydata + "\ n ";
}
Function readSession (){
Var t1 = document. getElementById ("t1 ");
Var oStorage = window. sessionStorage;
Var mydata = "nonexistent ";
If (oStorage. mydata ){
Mydata = oStorage. mydata;
}
T1.value + = "sessionStorage reads mydata:" + mydata + "\ n ";
}
Function cleanSession (){
Var t1 = document. getElementById ("t1 ");
Var oStorage = window. sessionStorage;
Var mydata = "nonexistent ";
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 = "nonexistent ";
If (oStorage. mydata ){
Mydata = oStorage. mydata;
}
T1.value + = "localStorage reads mydata:" + mydata + "\ n ";
}
Function cleanStorage (){
Var t1 = document. getElementById ("t1 ");
Var oStorage = window. localStorage;
Var mydata = "nonexistent ";
If (oStorage. mydata ){
Mydata = oStorage. mydata;
}
OStorage. removeItem ("mydata ");
T1.value + = "localStorage clear mydata:" + mydata + "\ n ";
}
</Script>
<Div>
<Textarea id = "t1"> </textarea>
<Label> data to be saved: </label>
<Input type = "text" id = "t2"/>
<Input type = "button" class = "button" onclick = "saveSession ()" name = "b1" value = "session save"/>
<Input type = "button" class = "button" onclick = "readSession ()" value = "session read"/>
<Input type = "button" class = "button" onclick = "cleanSession ()" value = "session clearing"/>
<Input type = "button" class = "button" onclick = "saveStorage ()" value = "local save"/>
<Input type = "button" class = "button" onclick = "readStorage ()" value = "local read"/>
<Input type = "button" class = "button" onclick = "cleanStorage ()" value = "local clear"/>
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
