Web Storage in HTML5 (sessionstorage| | Localstorage) Understanding and simple examples

What is Web storage?
Web Storage function, as the name implies, is on the web for the client to store data locally, specifically, the Web storage is divided into two kinds;

Sessionstorage:
Save the data in the session object, the so-called session refers to the user when browsing a site, from entering the site to the browser close the time elapsed, that is, the user to browse the site time spent. The session object can be used to hold any data that is required to be saved during this time period.


Localstorage:
Save the data in the client's local hardware device (usually the hard disk, of course, other hardware devices), that is, the browser is closed, the data is still there, the next time you open a browser to visit the site, you can still continue to use.


the difference between Sessionstorage and localstorage:
The difference between the two is that sessionstorage for temporary preservation, and localstorage for the permanent preservation, the next section, we will combine the example of deep learning! Why do you want to elicit webstorage?The reason: there are a few problems with cookies storing permanent data:
1. the size of the cookie is limited to 4KB;
2. cookies are sent along with the HTTP transaction, thus wasting a portion of the bandwidth used to send cookies;
3. The cumbersome and complicated operation of cookies;
 1, 1 sessionstorage:
Save the data in the session object, the so-called session refers to the user when browsing a Web site, from the site to the browser close through the time of the session, that is, users to browse the site spent time is the session life cycle. The session object can be used to hold any data that is required to be saved during this time period.

There are two main methods of this object:
Save data:Sessionstorage.setitem (Key, value);
Read data:Sessionstorage.getitem (Key);
Key:indicates the name of the key you want to deposit, which can be arbitrarily named, and can be understood by the meaning of the variable.
Value:represents a value, which is the value you want to deposit in key, and can be interpreted by assigning values to variables.

How to use:
Save data:Sessionstorage.setitem ("website", "w3cfuns.com");
Read data:Sessionstorage.getitem ("website");

Exaple: <! DOCTYPE HTML>
< HTML>
< Head>
< Meta CharSet="Utf-8">
< title> Local Storage sessionstorage</ title>
< Script type="Text/javascript">
Window. onload= function ()
{
Alert"When you close this page or close the browser, the data saved in the sessionstorage disappears, that is, when you reopen the page, click Get data, will not display any data, the Refresh page is not valid. \ r \ n This proves that the life cycle of a sessionstorage is when a user browses the site from the time of entry to departure. ")
First get BodyIn the3A inputElements
varmsg = Document. getElementById ("MSG");
varGetData = Document. getElementById ("GetData");
varSetData = Document. getElementById ("SetData");
SetData. onclick= function () {//Deposit data
if (Msg. value){
Sessionstorage.setitem ("Data", Msg. value);
Alert"The information has been saved to the data field");
}else{
Alert"Information cannot be empty");
}
}
GetData. onclick= function () {//Get Data
varmsg = Sessionstorage.getitem ("Data");
if (msg) {
AlertThe value in the data field is: "+ msg);
}else{
Alert"The 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:
use the same method as Sessionstorage, as shown in the following code:
There are two main methods of this object:
Save data:Localstorage.setitem (Key, value);
Read data:Localstorage.getitem (Key);
Key:indicates the name of the key you want to deposit, which can be arbitrarily named, and can be understood by the meaning of the variable.
Value:represents a value, which is the value you want to deposit in key, and can be interpreted by assigning values to variables.

How to use:
Save data:Localstorage.setitem ("website", "w3cfuns.com");
Read data:Localstorage.getitem ("website");Exaple: <! DOCTYPE HTML>
< HTML>
< Head>
< Meta CharSet="Utf-8">
< title> Local Storage localstorage</ title>
< Script type="Text/javascript">
Window. onload= function ()
{
Alert"When you close this page or close the browser, the data saved in the localstorage disappears, that is, when you reopen the page, click Get data, you can retrieve the data." ")
First get BodyIn the3A inputElements
varmsg = Document. getElementById ("MSG");
varGetData = Document. getElementById ("GetData");
varSetData = Document. getElementById ("SetData");
SetData. onclick= function () {//Deposit data
if (Msg. value){
Localstorage.setitem ("Data", Msg. value);
Alert"The information has been saved to the data field");
}else{
Alert"Information cannot be empty");
}
}
GetData. onclick= function () {//Get Data
varmsg = Localstorage.getitem ("Data");
if (msg) {
AlertThe value in the data field is: "+ msg);
}else{
Alert"The 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>