HTML5 Learning Notes Web Storage

HTML5 Web Storage, a better local storage method than a cookie.

What is HTML5 Web Storage

Use HTML5 to store the user's browser data locally.

Earlier, local storage was using cookies. But Web storage needs to be more secure and fast. This data is not saved on the server, but the data is only used for user requests for Web site data. It can store large amounts of data without compromising the performance of the site.

Data exists as a key-value pair, and the Web page's data is only allowed to be used for that page.

Localstorage and Sessionstorage

Localstorage: Data storage with no time limit

Sessionstorage: For a seeeion of Reiki storage

Before using Web Storage, you should check whether your browser supports localstorage and sessionstorage

if (typeof(Storage)!== "undefined")   {   //  yes! localstorage and sessionstorage support!   // Some code ... .. else {  //sorry!         No Web Storage support:   }

Localstorage objects Store Reiki without a time limit and will not expire.

Localstorage.lastname= "Smith";d Ocument.getelementbyid (

The following example records the number of clicks of a user

if (Localstorage.clickcount)  {  localstorage.clickcount=number (localstorage.clickcount) +1;  } Else   {  localstorage.clickcount=1;  } document.getElementById ("result"). Innerhtml= " You have clicked the button "+ Localstorage.clickcount +" time (s). ";

Sessionstorage Object

The Sessionstorage method stores data for a session. When the user closes the browser window, the data is deleted.

How to create and access a sessionstorage:

if (sessionstorage.clickcount) {      sessionstorage.clickcount=number (sessionstorage.clickcount) +1;  } Else {       sessionstorage.clickcount=1;} document.getElementById (

Look at the effect:

Connect 19 times to see Sessionstorage

Open another tab to see Sessionstorage: As you can see, when you open a new tab, the number of clicks is 1, meaning that the last click was not remembered.

Also see Localstorage,localstorage clicked 7 times,

Open another tab to see the effect: Click the Localstorage button once, the number of records displayed 8, on the basis of the last 1.

The full demo:

@{Layout = null;}<!DOCTYPE HTML><HTML><Head>    <Metaname= "Viewport"content= "Width=device-width" />    <title>Localstorage</title>    <Scriptsrc= "~/scripts/jquery-2.1.3.min.js"></Script>    <Scripttype= "Text/javascript">        functionClickCounter () {if (typeof(Storage)!== "undefined") {                if(sessionstorage.clickcount) {Sessionstorage.clickcount=Number (Sessionstorage.clickcount)+ 1; }                Else{Sessionstorage.clickcount= 1; }                $('#result'). HTML ("'); $('#result'). Append ('<p>' +Sessionstorage.clickcount+ '</p>'); }            Else {                $('#result'). Text ('Sorry, your browser does not support local storage'); }        }        functionClickCounter2 () {if (typeof(Storage)!== "undefined") {                if(localstorage.clickcount) {Localstorage.clickcount=Number (Localstorage.clickcount)+ 1; }                Else{Localstorage.clickcount= 1; }                $('#result2'). HTML ("'); $('#result2'). Append ('<p>' +Localstorage.clickcount+ '</p>'); }            Else {                $('#result2'). Text ('Sorry, your browser does not support local storage'); }        }    </Script></Head><Body>    <Div>        <P>            <Buttononclick= "ClickCounter ()"type= "button">Sessionstorage View the number of clicks</Button>        </P>        <DivID= "Result"></Div>        <P>Click the button to see the number of statistics</P>    </Div>    <Div>        <P>            <Buttononclick= "ClickCounter2 ()"type= "button">Localstorage View the number of clicks</Button>        </P>        <DivID= "RESULT2"></Div>        <P>Click the button to see the number of statistics</P>    </Div></Body></HTML>

The end of this section

HTML5 Learning Notes Web Storage