What is Web Storage?
The Web Storage function, as its name implies, is the function of storing data locally on the client on the Web. Specifically, Web Storage is divided into two types;
SessionStorage:
Data is stored in the session object. The session refers to the period from when a user browses a website to when the user closes the browser, that is, the time the user spends browsing the website. The session object can be used to save any data that needs to be stored during this period.
LocalStorage:
The data is stored on the client's local hardware device (usually the hard disk, of course, other hardware devices), that is, the browser is closed, and the data still exists, the next time you open your browser to access your website, you can continue using it.
Differences between sessionStorage and localStorage:
The difference between the two is that sessionStorage is saved on a temporary basis, while localStorage is saved permanently. In the next section, we will learn more with examples!Why webStorage?The reason is: There are several problems with cookies storing permanent data:
1. The cookie size is limited to 4 kb;
2. cookies are sent along with HTTP transactions, which wastes part of the bandwidth used for sending cookies;
3. Complicated cookie operations;
1. 1 SessionStorage:
Data is stored in the session object. The session refers to the period during which a user accesses a website and closes the session from the website to the browser, that is, the time the user spends browsing this website is the session lifecycle. The session object can be used to save any data that needs to be stored during this period.
This object mainly has two methods:
Save data: sessionStorage. setItem (Key, value );
Read data: sessionStorage. getItem (Key );
Key: the name of the Key you want to store. This name can be named at will and can be understood according to the meaning of the variable.
Value: indicates the Value, that is, the Value you want to store in the Key, which can be understood by the Value assigned by the variable.
Usage:
Save data: sessionStorage. setItem ("website", "W3Cfuns.com ");
Read data: sessionStorage. getItem ("website ");
Exaple: DOCTYPE HTML>
<Html>
<Head>
<Meta Charset= "UTF-8">
<Title> SessionStorage Title>
<Script Type= "Text/javascript">
Window.Onload= Function ()
{
Alert ("when you close this page or close your browser, the data saved in sessionStorage disappears. That is to say, when you open this page again, click get data, no data is displayed. refreshing the page is invalid. \ R \ n proves that the life cycle of sessionStorage is the period from entry to exit when a user browses a website. ")
// ObtainBodyThreeInputElement
VarMsg =Document. GetElementById ("msg ");
VarGetData =Document. GetElementById ("getData ");
VarSetData =Document. GetElementById ("setData ");
SetData.Onclick= Function () {// store data
If (msg.Value){
SessionStorage. setItem ("data", msg.Value);
Alert ("the information has been saved to the data field ");
} Else {
Alert ("information cannot be blank ");
}
}
GetData.Onclick= Function () {// get data
VarMsg = sessionStorage. getItem ("data ");
If (msg ){
Alert ("the value in the data field is:" + msg );
} Else {
Alert ("data field has no value! ");
}
}
}
Script>
Head>
<Body>
<Input Id= "Msg"Type= "Text"/>
<Input Id= "SetData"Type= "Button"Value= "Save data"/>
<Input Id= "GetData"Type= "Button"Value= "Get Data"/>
Body>
Html>
1, 2 LocalStorage:
The usage method is similar to SessionStorage, as shown in the following code:
This object mainly has two methods:
Save data: localStorage. setItem (Key, value );
Read data: localStorage. getItem (Key );
Key: the name of the Key you want to store. This name can be named at will and can be understood according to the meaning of the variable.
Value: indicates the Value, that is, the Value you want to store in the Key, which can be understood by the Value assigned by the variable.
Usage:
Save data: localStorage. setItem ("website", "W3Cfuns.com ");
Read data: localStorage. getItem ("website"); exaple: DOCTYPE HTML>
<Html>
<Head>
<Meta Charset= "UTF-8">
<Title> Local Storage Title>
<Script Type= "Text/javascript">
Window.Onload= Function ()
{
Alert ("when you close this page or close your browser, the data saved in localStorage disappears. That is to say, when you open this page again, click get data to retrieve the data. ")
// ObtainBodyThreeInputElement
VarMsg =Document. GetElementById ("msg ");
VarGetData =Document. GetElementById ("getData ");
VarSetData =Document. GetElementById ("setData ");
SetData.Onclick= Function () {// store data
If (msg.Value){
LocalStorage. setItem ("data", msg.Value);
Alert ("the information has been saved to the data field ");
} Else {
Alert ("information cannot be blank ");
}
}
GetData.Onclick= Function () {// get data
VarMsg = localStorage. getItem ("data ");
If (msg ){
Alert ("the value in the data field is:" + msg );
} Else {
Alert ("data field has no value! ");
}
}
}
Script>
Head>
<Body>
<Input Id= "Msg"Type= "Text"/>
<Input Id= "SetData"Type= "Button"Value= "Save data"/>
<Input Id= "GetData"Type= "Button"Value= "Get Data"/>
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
