HTML5遍历localStorage数据

主要用到localStorage的两个方法lenght和key。

length表示localStorage中保存的数据总量，key表示保存数据时的键名项，该属性通常与索引号配合使用，表示第几条键名对应的数据记录，索引号是以0开始。

【清除localStorage中的数据用localStorage.clear()方法】

小例子，如图，做一个点击发表按钮将内容存入localStorage中，然后实时填充到上门的表格中。

• 获取数据并存储

[javascript]  view plain  copy

1. $(function(){  
2.    //定义一个全局变量ID，用于编号发布信息的编号  
3.     var testID=1;  
4.     //点击发布按钮  
5. $("#pub").click(function(){  
6.     varinfo=$.trim($("textarea").val()),  
7.  time=new Date(),  
8.  localTime=time.toLocaleTimeString();  
9. var testVal=info+","+time;  
10. //存储数据，setItem(key,value);  
11. localStorage.setItem(“test”+testID,testVal)  
12. ;  
13. testID++;  
14. //调用显示数据函数  
15. showInfo()  
16. ;  
17. });  
18. function showInfo(){  
19. .....  
20. }  
21. })  

• 取出数据显示

[javascript]  view plain  copy

1. functino showInfo(){  
2.     vararray=new Array();  
3.     for(var i=0;i  
4.        //调用key方法获取localStorage中数据对应的键名  
5.       //如这里键名是从test1开始递增到testN的，那么localStorage.key(0)对应test1  
6.       var getKey=localStorage.key(i);  
7.       //华丽分割，看下面的注意  
8.             
9.        //通过键名获取值，这里的值包括内容和日期  
10.        var getVal=localStorage.getItem(getKey);  
11.        //array[0]就是内容，array[1]是日期  
12.        array=getVal.split(",");  
13.        .....省略填充....  
14.     }  
15. }  

注意：

由于localStorage不仅仅是存储了这里所添加的信息，可能还存在其它信息，但是那些信息的键名也是以递增数字形式表示的，这样如果这里也用纯数字就可能覆盖另外一部分的信息，所以建议键名都用独特的字符区分开，这里我在每个ID前加上test以示区别。

这时怎么获取localStorage里面我想要提取的键名对应的信息？

可以加上判断。获取键名时，截取键名前几个字符判断是否为存入时设定的。

如上面获取的getKey可能是1，2，3，test1,test2...

if(getKey.substring(0,4)=="test"){

     //从0开始，长度为4的子字符串是否为test

      //然后这里再取出值

}

在Chrome下看localStorage存储的信息，只取出key包含test的。