美文网首页
如何使用localstorage存储搜索记录

如何使用localstorage存储搜索记录

作者: 悦者生存 | 来源:发表于2017-05-31 16:47 被阅读58次

1.例子中使用了bootstrap框架,布局很简单

出来后就是这个样子

2.js部分如下

下面是可复制版本

//设置键数组

varkey=[];

//设置值数组

varvalue=[];

//设置第一个键值

varfirstKey;

//设置一个空字符串变量

varhtml="";

//初始化的函数

functioninit() {

//每次清空键,值数组

key=[];

value=[];

//从本地存储中取数据

html="";

for(vari=0;i

//循环localstorage,获取所有键值

varnKey=localStorage.key(i);

//因为我们设置的键值是以当前时间的距离1970年1月1日的毫秒数,所以判断一下

if(Number(nKey)>100000){

varnvalue=localStorage.getItem(nKey);

key.push(nKey);

value.push(nvalue);

html+=""+nvalue+"";

}

}

$(".record").html(html);

}

init();

$(".btn").click(function() {

//获取输入的值

varval=$(".box").val();

//获取当前时间

varntime=(newDate()).getTime();

//如果记录大于三条的话

if(value.length>3){

//获取第一个键值

firstKey=key[0];

//移除第一个记录

localStorage.removeItem(firstKey);

localStorage.setItem(ntime,val);

}else{

localStorage.setItem(ntime,val);

}

//每次都初始化一下

init();

});

相关文章

网友评论

      本文标题:如何使用localstorage存储搜索记录

      本文链接:https://www.haomeiwen.com/subject/pirjfxtx.html