要求
1. 实现长时间(即便是关了浏览器)也能记录数据
2. 让每一条便利贴以对象的方式存储
思路
- 可以使用html5中的localStorage实现长时间的数据本地存储
- 使用json中的parse和stringify实现便利条对象的数据化转换
- 每一个便利条有数据(text)和颜色(color)两个属性
- 可以使用(new Date()).getTime()来让每一个便利条的key唯一
实现
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5中用localStorage实现的便利贴网站</title>
</head>
<body>
<input type="text" placeholder="请在此处输入文本" id="message">
<select id="note_color">
<option value="LightGoldenRodYellow">yellow</option>
<option value="PaleGreen">PaleGreen</option>
<option value="LightPink">Pink</option>
<option value="LightBlue">LightBlue</option>
</select>
<input type="button" id="save_button" value="存储">
<input type="button" id="clear_all" value="清空">
<ol id="messages">
</ol>
</body>
<script>
window.onload = function() {
var saveButton = document.getElementById("save_button");
saveButton.onclick = save;
var clearButton = document.getElementById("clear_all");
clearButton.onclick = clearAll;
showMessages();
}
function save() {
var text = document.getElementById("message").value;
var color = document.getElementById("note_color").value;
var message = {
"text": text,
"color": color
};
var key = "message" + (new Date()).getTime();
var keys = getKeys();
keys.push(key);
localStorage.setItem(key, JSON.stringify(message));
localStorage.setItem("keys", JSON.stringify(keys));
showMessages();
}
function clearAll() {
localStorage.clear();
}
function showMessages() {
//每次都要刷新
var messages = document.getElementById("messages");
var messagesChilds = messages.childNodes;
//首先清除所有message节点
while(messagesChilds.length > 0) {
messages.removeChild(messagesChilds[0]);
}
var keys = getKeys();
for(var i = 0; i < keys.length; i++) {
var li = document.createElement("li");
var message = JSON.parse(localStorage.getItem(keys[i]));
li.style.color = message["color"];
li.innerHTML = message["text"];
messages.appendChild(li);
}
}
function getKeys() {
//获取Keys的对象
//keys是专门存储localStorage的key的
var keys = JSON.parse(localStorage.getItem("keys"));
if(keys == null) {
keys = [];
localStorage.setItem("keys", JSON.stringify(keys));
}
return keys;
}
</script>
</html>
效果如图
可以改进的地方
1. showMessage总是要清空原便利贴的数据之后才能显示新的数据出来,可不可以直接获取新加入的便利贴,之后直接appendChild到<ol>中呢
2. 这个实例没有删除便利贴的功能