Home > Developer > Web Develop
Gets all the data information saved by the Localstorage object. This data is typically traversed, and the following two properties of the Localstorage object need to be accessed during traversal
Length: Represents the total amount of data saved in the Localstorage object.
Key: Represents the keys when the data is saved
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8">5 <title>Untitled Document</title>6 <Scripttype= "Text/javascript"language= "JScript"src= "Js7-6.js"></Script>7 <Linkhref= "Css7-3.css"rel= "stylesheet"type= "Text/css">8 </Head>9 Ten <BodyOnLoad= "Getlocaldata ();"> One A <ulID= "Ulmessage"> - reading data .... - </ul> the <Pclass= "P4"> - <textareaID= "Txtcontent"class= "Inputtxt"cols= "Panax Notoginseng"rows= "5"></textarea> - <BR> - <inputID= "Btnadd"type= "button"value= "POST"class= "Inputbtn"OnClick= "btnAdd_Click ();"> + </P> - </Body> + </HTML>
Js
1 //JavaScript Document2 function$$ (ID) {3 returndocument.getElementById (ID);4 }5 //called when the Publish button is clicked6 functionbtnAdd_Click () {7 //get the contents of a text box8 varstrcontent=$$ ("Txtcontent"). Value;9 //Define a Date type ObjectTen varStrtime=NewDate (); One //if it is not empty, save A if(strcontent.length>0){ - varstrkey= "CNT" +retrndnum (4); - varStrval=strcontent+ "," +strtime.tolocaletimestring (); the Localstorage.setitem (strkey,strval); - } - //New Load - Getlocaldata (); + //Empty Original content -$$ ("Txtcontent"). Value= ""; + } A //get saved data and appear on the page at functionGetlocaldata () { - //Title Section - varStrhtml= "<li class= ' Li_h ' >"; -strhtml+= "<span class= ' spn_a ' > Numbering </span>"; -strhtml+= "<span class= ' Spn_b ' > Content </span>"; -strhtml+= "<span class= ' Spn_c ' > Time </span>"; instrhtml+= "</li>" - //Content Section to varStrarr=NewArray ();//define an array + - for(varinti=0;inti<localstorage.length; inti++){ the * //get the key value $ varstrkey=Localstorage.key (IntI);Panax Notoginseng //Filter Key Name Contents - if(strkey.substring (0,3) = = "CNT"){ the varStrval=Localstorage.getitem (strkey); +Strarr=strval.split (","); Astrhtml+= "<li class= ' Li_c ' >"; thestrhtml+= "<span class= ' spn_a ' >" +strkey+ "</span>" +strhtml+= "<span class= ' Spn_b ' >" +strarr[0]+ "</span>" -strhtml+= "<span class= ' Spn_c ' >" +strarr[1]+ "</span>" $strhtml+= "</li>"; $ } - } - the$$ ("Ulmessage"). innerhtml=strhtml; - }Wuyi //generates a random number of a specified length the - functionretrndnum (n) { Wu varStrrnd= ""; - for(varinti=0;inti<n;inti++){ AboutStrrnd+=math.floor (Math.random () *10); $ } - returnstrrnd; -}
Steps:
1. First call the Custom Function Getlocaldata () traverse the length property of the Localstorage Localstorage save all data through the variable "strkey" to save the key name of each traversal
In order to obtain only the review of the data interpretation gets the first three characters of the key name is "CNT" if it is the GetItem method to take the value, save to the variable strval,
2. Because the key is a string composed of ",". So we first save the cut values by array Strarr, and then display the contents of each item by an array subscript.
3. Click on the "Publish" button to btnAdd_Click (); Get reviews first and save to Strcontent
4. To make the Save key name non-repeating, call the function "Strrndnum ()" When generating the key name, randomly generate a four-bit number
5. To save more information, combine setcontent with time in variable Strval
Finally, the variable "strkey" and "Strval" are saved as key values in the Localstorage object using SetItem.
HTML5 Storage series of Localstorage first article
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
