html5循环展示数据,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的。