(转)HTML5遍历localStorage数据

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

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

获取数据并存储
$(function(){
    //定义一个全局变量ID，用于编号发布信息的编号
    var testID=1;
    //点击发布按钮
$("#pub").click(function(){
    var info=$.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(){
    var array=new Array();
    var len=window.localStorang.length;

    for(var i=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(){
   
    var len=window.localStorage.length;
    for(var i=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);
       
       
        }
       
  
    }
}