1.例子中使用了bootstrap框架，布局很簡(jiǎn)單
出來后就是這個(gè)樣子
2.js部分如下
下面是可復(fù)制版本
//設(shè)置鍵數(shù)組
varkey=[];
//設(shè)置值數(shù)組
varvalue=[];
//設(shè)置第一個(gè)鍵值
varfirstKey;
//設(shè)置一個(gè)空字符串變量
varhtml="";
//初始化的函數(shù)
functioninit() {
//每次清空鍵，值數(shù)組
key=[];
value=[];
//從本地存儲(chǔ)中取數(shù)據(jù)
html="";
for(vari=0;i
//循環(huán)localstorage嚷节，獲取所有鍵值
varnKey=localStorage.key(i);
//因?yàn)槲覀冊(cè)O(shè)置的鍵值是以當(dāng)前時(shí)間的距離1970年1月1日的毫秒數(shù)，所以判斷一下
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();
//獲取當(dāng)前時(shí)間
varntime=(newDate()).getTime();
//如果記錄大于三條的話
if(value.length>3){
//獲取第一個(gè)鍵值
firstKey=key[0];
//移除第一個(gè)記錄
localStorage.removeItem(firstKey);
localStorage.setItem(ntime,val);
}else{
localStorage.setItem(ntime,val);
}
//每次都初始化一下
init();
});
