之前利用localStorage写过手机便签应用,因为蛋疼的换了台三星的屌丝级手机,木
有了测试的工具,没能继续优化维护下去。而在网页上实现便签功能目前来说似乎没有太大
的意义,因为不论是 Firefox 还是 Chrome 都还没能实现 localStorage 数据的同步。贴
出代码,仅供参考,希望对感兴趣的同学能有所启发!
var Storage ={
saveData:function(){//保存数据
var data = document.querySelector("#post textarea");
if(data.value != ""){
var time = new Date().getTime() + Math.random() * 5;//getTime是Date对象中的方法,作用是返回 1970年01月01日至今的毫秒数
localStorage.setItem(time, data.value + "|" + this.getDateTime());//将毫秒数存入Key值中,可以降低Key值重复率
data.value = "";
this.writeData();
}else{
alert("请填写您的留言!");
}
},
writeData:function(){//输出数据
var dataHtml = "", data = "";
for(var i = localStorage.length-1; i >= 0; i--){//效率更高的循环方法
data = localStorage.getItem(localStorage.key(i)).split("|");
dataHtml += "<p><span class=\"msg\">" + data[0] + "</span><span class=\"datetime\">" + data[1] + "</span></p>";
}
document.getElementById("comment").innerHTML = dataHtml;
},
clearData:function(){//清空数据
if(localStorage.length > 0){
if(window.confirm("清空后不可恢复,是否确认清空?")){
localStorage.clear();
this.writeData();
}
}else{
alert("没有需要清空的数据!");
}
},
getDateTime:function(){//获取日期时间,例如 2012-03-08 12:58:58
var isZero = function(num){//私有方法,自动补零
if(num < 10){
num = "0" + num;
}
return num;
}
var d = new Date();
return d.getFullYear() + "-" + isZero(d.getMonth() + 1) + "-" + isZero(d.getDate()) + " " + isZero(d.getHours()) + ":" + isZero(d.getMinutes()) + ":" + isZero(d.getSeconds());
}
} window.onload = function(){
Storage.writeData();//当打开页面的时候,先将localStorage中的数据输出一边,如果没有数据,则输出空
document.getElementById("postBt").onclick = function(){Storage.saveData();}//发表评论按钮添加点击事件,作用是将localStorage中的数据输出
document.getElementById("clearBt").onclick = function(){Storage.clearData();}//清空所有已保存的数据
}