HTML5 Web Storage

In HTML5, a new and very important feature is the ability to store data locally in the client's Web Storage function, which can be used to store simple user information such as user name in the client, but through long-term use, it has been found that the use of cookies to store permanent data

A problem.

• Size: The size of the cookie is limited to 4KB

• Bandwidth: Cookies are sent along with the HTTP transaction, thus wasting a portion of the bandwidth used to send cookies

• Complexity: It is difficult to manipulate cookies correctly.

For the above question HTML5, a feature that stores data locally on the client is re-provided. He is the Web Storage feature.

As the name implies, the Web Storage feature is the ability to store data on the web, where it is stored locally for the client. There are two types of specific:

sessionStorage: Saves the data in the Session object. A session is the amount of time that a user has spent browsing a website, from entering the website to the browser closing, which is the time it takes for the user to browse the site. The session object can be used to hold any data that is required to be saved during this time period.

localStorage: Saves the data in the client's local hardware device (hard drive), even if the browser is turned off, the data still exists, and the next time you open the browser, you can continue to use the site.

Before using Web Storage, you should check whether your browser supports localStorage and sessionStorage :

if(typeof(Storage)!=="undefined"){    // 是的! 支持 localStorage  sessionStorage 对象!    // 一些代码.....}else{    // 抱歉! 不支持 web 存储。}

Either localStorage , or, the sessionStorage APIs are the same, commonly used in the following ( localStorage for example):

• Save data: localStorage.setItem(key,value) ;
• Read data: localStorage.getItem(key) ;
• Delete individual data: localStorage.removeItem(key) ;
• Delete all data: localStorage.clear() ;
• Get key for an index: localStorage.key(index) ;

tip: key/value pairs are usually stored as strings, and you can convert the format as you want.

The following example shows the number of times a user clicked a button.

The string values in the code are converted to numeric types:

<script>    function ClickCounter(){        if(typeof(Storage)!=="undefined"){            if(Localstorage.Clickcount){                Localstorage.Clickcount= Number(Localstorage.Clickcount)+1;            }            Else            {                Localstorage.Clickcount=1;            }            Document.getElementById("Result").InnerHTML="You have clicked the button" + Localstorage.Clickcount + "Times";        }        Else        {            Document.getElementById("Result").InnerHTML="Sorry, your browser does not support Web storage. ";        }    }</script><p><button onclick= "ClickCounter()"type=" button "> Point me! </button></p><div id= "result" ></div><P>Click this button to see the increase of the counter.</p><p> close Browser tab(or Window), reopen this page and the counter will continue counting(not Reset). </p>

Effect:

A sessionStorge Small instance

Html

<table>    <tr>        <td>Name:</td>        <td>            <inputtype="Text"id="Name">        </td>    </tr>    <tr>        <td>Mailbox:</td>        <td>            <inputtype="Text"id="Email">        </td>    </tr>    <tr>        <td>Phone:</td>        <td>            <inputtype="Text"id="Phone">        </td>    </tr>    <tr>        <td>Note:</td>        <td>            <inputtype="Text"id="Memo">        </td>    </tr>    <tr>        <td></td>        <td>            <inputtype="button"value="Save"onclick="Savestorage ()">        </td>    </tr></table><p>Retrieval:<inputtype="Text"id="Find">    <inputtype="button"value="Search"onclick="Findstorage (' msg ')"></p><pid="MSG"></p>

Js

function Savestorage(){    varData= New Object();    Data.name = Document.getElementById("Name").value;    Data.Email = Document.getElementById("Email").value;    Data.Phone = Document.getElementById("Phone").value;    Data.Memo = Document.getElementById("Memo").value;    varStr= JSON.stringify(data);    Localstorage.SetItem(Data.name,Str;    Alert(' data saved ');}function Findstorage(ID){    varFind= Document.getElementById(' Find ').value;    varStr= Localstorage.GetItem(Find);    varData= JSON.Parse(str);    varResult= "Name:"+ Data.name+"<br/>";Result+= "Mailbox:"+ Data.Email+"<br/>";Result+= "Phone:"+ Data.Phone+"<br/>";Result+= "Remarks:"+ Data.Memo+"<br/>";    varTarget= Document.getElementById(ID);    Target.InnerHTML =Result;}

Effect:

Visualize the view in Chrome browser localStorage and sessionStorage :

HTML5 Web Storage