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();
});
网友评论