使用localStorage写一个简单的备忘录
使用html+js实现一个简单的备忘录，主要体会一下localStorage的用法。
先看看效果图：
在输入框中输入文字，点击保存按钮，文本内容会在下放展示出来，
然后刷新下浏览器，会发现文本内容不会丢失，这是因为文本内容被保存到localStorage中了，
可以理解为保存到了浏览器的Cookie中。再点击"清空本地存储",会发现下方的文本都没有了。
--------------------------------------------------------------------------------------
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HTML5-任务列表</title> 6 </head> 7 <body> 8 <body> 9 <div> 10 <input id="todoMsg" type="text" width='200'></input> 11 <input id="saveMsg" type="button" value="保存"/> 12 <input id="clearMsg" type="button" value="清空本地存储"/> 13 <p style="color: #286090;font-size: 20px;">任务列表</p> 14 <hr/> 15 <div id="todoList"></div> 16 </div> 17 <script src="https://code.jquery.com/jquery-1.11.1.js"></script> 18 <script> 19 // 从本地存储加载任务列表 20 var msgList = localStorage.getItem("msgList"); 21 22 if (msgList !== null && msgList !== undefined && msgList != '') { 23 // 展示任务列表 24 document.getElementById("todoList").innerHTML = msgList; 25 } 26 // 添加并保存单个任务 27 $("#saveMsg").click(function () { 28 var todoMsg = document.getElementById("todoMsg").value; 29 if (todoMsg == null || todoMsg == '') { 30 alert("请输入任务") 31 return; 32 } 33 var todoMsgHtml = '<h5><span style="color: red">任务:</span>' + todoMsg + '</h5>'; 34 // 追加到任务列表 35 msgList = (msgList == null ? '' : msgList) + todoMsgHtml; 36 localStorage.setItem("msgList", msgList); 37 // 刷新任务列表 38 document.getElementById("todoList").innerHTML = msgList; 39 }); 40 // 清空任务列表并刷新浏览器 41 $("#clearMsg").click(function () { 42 localStorage.clear(); 43 document.getElementById("clearMsg").innerHTML = ""; 44 location.reload(); 45 }); 46 </script> 47 </body> 48 </body> 49 </html>
------------------------------------------------------------------------------------------------------
总结：功能简单，主要体会下localStorage的用法。
下一步打算写个漂亮点的任务看板放到云服务器上给大家免费试用，无需登录即可快速创建任务(基于浏览器Cookie存储)，
同时具备微信扫码登录功能，可将任务同步到服务器永久保存，也可以一键导出任务列表到本地磁盘。
