要求

1.     实现长时间(即便是关了浏览器)也能记录数据

2.     让每一条便利贴以对象的方式存储

思路

可以使用html5中的localStorage实现长时间的数据本地存储

使用json中的parse和stringify实现便利条对象的数据化转换

每一个便利条有数据(text)和颜色(color)两个属性

可以使用(new Date()).getTime()来让每一个便利条的key唯一

实现

HTML5中用localStorage实现的便利贴网站

yellow

PaleGreen

Pink

LightBlue

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;

}

效果如图

可以改进的地方

1.     showMessage总是要清空原便利贴的数据之后才能显示新的数据出来，可不可以直接获取新加入的便利贴，之后直接appendChild到

1. 中呢

2.     这个实例没有删除便利贴的功能