要求
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>中呢
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。