(转)HTML5遍历localStorage数据

主要用到localStorage的两个方法lenght和key。
length表示localStorage中保存的数据总量，key表示保存数据时的键名项，该属性通常与索引号配合使用，表示第几条键名对应的数据记录，索引号是以0开始。
【清除localStorage中的数据用localStorage.clear()方法】

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

获取数据并存储
$(function(){
   //定义一个全局变量ID，用于编号发布信息的编号
    vartestID=1;
   //点击发布按钮
$("#pub").click(function(){
    varinfo=$.trim($("textarea").val()),
 time=new Date(),
 localTime=time.toLocaleTimeString();
var testVal=info+","+time;
//存储数据，setItem(key,value);
localStorage.setItem("test"+testID,testVal)
;
testID++;
//调用显示数据函数
showInfo()
;
});
function showInfo(){
.....
}
})

取出数据显示
functino showInfo(){
    vararray=new Array();
    varlen=window.localStorang.length;

    for(vari=0;i
       //调用key方法获取localStorage中数据对应的键名
       //如这里键名是从test1开始递增到testN的，那么localStorage.key(0)对应test1
       var getKey=localStorage.key(i);
-----------------------------------------------------
----------------华丽分割，看下面的注意-------------------
-----------------------------------------------------           
       //通过键名获取值，这里的值包括内容和日期
       var getVal=localStorage.getItem(getKey);
       //array[0]就是内容，array[1]是日期
       array=getVal.split(",");
       .....省略填充....
    }
}

注意：
由于localStorage不仅仅是存储了这里所添加的信息，可能还存在其它信息，但是那些信息的键名也是以递增数字形式表示的，这样如果这里也用纯数字就可能覆盖另外一部分的信息，所以建议键名都用独特的字符区分开，这里我在每个ID前加上test以示区别。
这时怎么获取localStorage里面我想要提取的键名对应的信息？
可以加上判断。获取键名时，截取键名前几个字符判断是否为存入时设定的。
如上面获取的getKey可能是1，2，3，test1,test2...
if(getKey.substring(0,4)=="test"){
   //从0开始，长度为4的子字符串是否为test
   //然后这里再取出值
}

可以在Chrome下看localStorage存储的信息。

完整代码

function showInfo(){
   
    varlen=window.localStorage.length;
    for(vari=0;i
       // 调用key方法获取localStorage中数据对应的键名
       var getKey=localStorage.key(i);
       if(getKey.substring(0,3)=="标题:"){
       //alert(getKey);
        //从0开始，长度为3的子字符串是否为"标题:"
        //然后这里再取出值
       var value=localStorage.getItem(getKey);
       

       // 通过键名获取值，这里的值包括内容和日期
       var getVal=localStorage.getItem(getKey);
       // array[0]就是内容，array[1]是日期
       alert(getKey+"@@"+getVal);
       
       
       }
       
  
    }
}