首页 > 代码库 > html5 存储系列之localStorage第一篇

html5 存储系列之localStorage第一篇

2024-09-09 05:24:04   214人阅读

获取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对象中。

html5 存储系列之localStorage第一篇


联系
我们