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();

});