html5 存储系列之localStorage第一篇
获取localStorage对象保存的全部数据信息。通常需要遍历这些数据，在遍历过程中需要访问localStorage对象的以下两个属性
length：表示localStorage对象中保存数据的总量。
key：表示保存数据时的键名项
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <script type="text/javascript" language="jscript" src="js7-6.js"></script> 7 <link href="css7-3.css" rel="stylesheet" type="text/css"> 8 </head> 9 10 <body onLoad="getlocalData();"> 11 12 <ul id="ulMessage"> 13 正在读取数据中.... 14 </ul> 15 <p class="p4"> 16 <textarea id="txtContent" class="inputtxt" cols="37" rows="5"></textarea> 17 <br> 18 <input id="btnAdd" type="button" value="发表" class="inputbtn" onClick="btnAdd_Click();"> 19 </p> 20 </body> 21 </html>
js
1 // JavaScript Document 2 function $$(id){ 3 return document.getElementById(id); 4 } 5 //点击发表按钮时调用 6 function btnAdd_Click(){ 7 //获取文本框中的内容 8 var strContent=$$("txtContent").value; 9 //定义一个日期型对象 10 var strTime=new Date(); 11 //如果不为空，则保存 12 if(strContent.length>0){ 13 var strKey="cnt"+RetRndNum(4); 14 var strVal=strContent+","+strTime.toLocaleTimeString(); 15 localStorage.setItem(strKey,strVal); 16 } 17 //从新加载 18 getlocalData(); 19 //清空原先内容 20 $$("txtContent").value=""; 21 } 22 //获取保存数据并显示在页面中 23 function getlocalData(){ 24 //标题部分 25 var strHTML="<li class='li_h'>"; 26 strHTML+="<span class='spn_a'> 编号</span>"; 27 strHTML+="<span class='spn_b'> 内容</span>"; 28 strHTML+="<span class='spn_c'> 时间</span>"; 29 strHTML+="</li>" 30 //内容部分 31 var strArr=new Array();//定义一个数组 32 33 for(var intI=0;intI<localStorage.length; intI++){ 34 35 //获取key值 36 var strKey=localStorage.key(intI); 37 //过滤键名内容 38 if(strKey.substring(0,3)=="cnt"){ 39 var strVal=localStorage.getItem(strKey); 40 strArr=strVal.split(","); 41 strHTML+="<li class='li_c'>"; 42 strHTML+="<span class='spn_a'>"+strKey+"</span>" 43 strHTML+="<span class='spn_b'>"+strArr[0]+"</span>" 44 strHTML+="<span class='spn_c'>"+strArr[1]+"</span>" 45 strHTML+="</li>"; 46 } 47 } 48 49 $$("ulMessage").innerHTML=strHTML; 50 } 51 //生成指定长度的随机数 52 53 function RetRndNum(n){ 54 var strRnd=""; 55 for(var intI=0;intI<n;intI++){ 56 strRnd+=Math.floor(Math.random()*10); 57 } 58 return strRnd; 59 }
步骤：
1.首先调用自定义函数getLocaldata()根据localStorage的length属性进行遍历localStorage保存的全部数据通过变量“strkey”保存每次遍历的键名
为了只获取点评的数据判读取得键名的前三位字符是否为“cnt”如果是则通过getItem方法取值，保存到变量strval中，
2.因为键是由“，”组成的字符串。所以先通过数组strArr保存切割下来的各项数值，然后通过数组下标将各项获取的内容显示出来
3.点击“发表”按钮调到btnAdd_Click();先获取点评内容存到strContent中
4.为了令保存键名不重复，在生成键名时调用函数"strRndNum()",随机生成一个四位数字
5.为了保存更多信息将setContent与时间结合保存在变量strVal中
最后用setItem将变量“strkey”与“strVal”分别作为键值保存在localStorage对象中。
