【实例】html5中使用localStorage实现简易的便利贴网页

要求

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. 这个实例没有删除便利贴的功能

【实例】html5中使用localStorage实现简易的便利贴网页

相关文章