Web Storage's Message board

Browser support

Ie8+,firefox 28.0+,chrome 33.0+,safari 7.0+.

First to understand a few JS problems. Json.parse () and Json.stringify ()

Parse is used to parse a JSON object from a string, such as

var str = ' {' name ': ' Huangxiaojian ', ' age ': ' 23 '} '

Results:

Json.parse (str)

Object

1. Age: "All"
2. Name: "Huangxiaojian"
3. __proto__: Object

Stringify () is used to parse out a string from an object, such as

var a = {A:1,b:2}

Results:

Json.stringify (a)

"{" A ": 1," B ": 2}"

Storing Data

It can be used when using Web Storage to do database retrieval. If you have more than one data, you can create object objects, and then assign the obtained value values, which are strings, to the custom properties of the created object. Private objects are also protected.

Example 1:

function Iocalstorage (ID) {varobj=NewObject; Obj.name=document.getelementbyid ("name"). Value; Obj.email=document.getelementbyid ("Email"). Value; Obj.tel=document.getelementbyid ("Tel"). Value; Obj.memo=document.getelementbyid ("Memo"). Value; varStr=json.stringify (obj);        Localstorage.setitem (Obj.name, str); Alert ("Hello already saved"); //readiocaltwo (' iocal_msg '); Read content//readiocalthree (' iocal_msg ');//Retrieving content//readiocalfour (ID)//Retrieving content    } <divclass="Box"> <ul> <li><span> name:</span> <inputclass="txt"Type="text"Id="name"></li> <li><span>EMIL:</span> <inputclass="txt"Type="text"Id="Email"></li> <li><span> phone:</span> <inputclass="txt"Type="text"Id="Tel"></li> <li><span> remarks:</span> <inputclass="txt"Type="text"Id="Memo"></li> </ul> <divclass="Bottom"> <input type="Button"Value="Save Data" class="btn"onclick="iocalstorage (' iocal_input ')"> </div></div>

Retrieve data first read: All read, output by loop key value//read by Key function readiocal (ID) {varTraget =document.getElementById (ID);varmsg = Localstorage.getitem ("message"); for(varI=0; i<localstorage.length;i++) { varkey=Localstorage.key (i); traget.innerhtml+=key+":"+localstorage.getitem (Key) +"<br/>"; } } HTML section:<input type="Button" class="FL btn"Value="Retrieving Data"onclick="readiocal (' iocal_msg ')"> <p id="iocal_msg"> <p> Second read: Read based on the ID of the input key value to find the matching whole piece of data

 //read by IDfunction Readiocaltwo (ID) {varTraget =document.getElementById (ID); varFindtxt =document.getelementbyid ("Find"). Value; varMsg=localstorage.getitem (Findtxt);//retrieves based on the value enteredtraget.innerhtml+=msg+"<br/>"; }html:<divclass="Box"><divclass="Jiansuo"> <spanclass="FL"> Search: </span><input id="Find"Type="text" class="txt FL"> <input type="Button" class="FL btn"Value="Retrieving Data"onclick="readiocal (' iocal_msg ')"> </div> <p id="iocal_msg"> <p></div>

Control of the output form converts a string into an object by Json.parse ().

 //retrieves the value based on the input ID boxfunction Readiocalfour (ID) {varTraget =document.getElementById (ID); Traget.innerhtml=""; varFindtxt =document.getelementbyid ("Find"). Value; varobj=Localstorage.getitem (findtxt); varData=json.parse (obj); varreslut="name"+data.name+"<br>"; Reslut+="EMIl"+data.email+"<br>"; Reslut+="Tel"+data.tel+"<br>"; Reslut+="Memo"+data.memo+"<br>"; varMsg=localstorage.getitem (Findtxt);//traget.innerhtml+=reslut+"<br/>"; }<divclass="Box"> <divclass="Jiansuo"> <spanclass="FL"> Search: </span><input id="Find"Type="text" class="txt FL"> <input type="Button" class="FL btn"Value="Retrieving Data"onclick="readiocaltwo (' iocal_msg ')"> </div> <p id="iocal_msg"> <p></div>

Web Storage's Message board