HTML5遍历localStorage数据



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();
    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存储的信息，只取出key包含test的。
HTML5遍历localStorage数据

HTML5遍历localStorage数据
HTML5遍历localStorage数据