使用localStorage写一个简单的备忘录
使用html+js實現(xiàn)一個簡單的備忘錄，主要體會一下localStorage的用法。
先看看效果圖：
在輸入框中輸入文字，點擊保存按鈕，文本內(nèi)容會在下放展示出來，
然后刷新下瀏覽器，會發(fā)現(xiàn)文本內(nèi)容不會丟失，這是因為文本內(nèi)容被保存到localStorage中了，
可以理解為保存到了瀏覽器的Cookie中。再點擊"清空本地存儲",會發(fā)現(xiàn)下方的文本都沒有了。
--------------------------------------------------------------------------------------
代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HTML5-任務(wù)列表</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;">任務(wù)列表</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 // 從本地存儲加載任務(wù)列表 20 var msgList = localStorage.getItem("msgList"); 21 22 if (msgList !== null && msgList !== undefined && msgList != '') { 23 // 展示任務(wù)列表 24 document.getElementById("todoList").innerHTML = msgList; 25 } 26 // 添加并保存單個任務(wù) 27 $("#saveMsg").click(function () { 28 var todoMsg = document.getElementById("todoMsg").value; 29 if (todoMsg == null || todoMsg == '') { 30 alert("請輸入任務(wù)") 31 return; 32 } 33 var todoMsgHtml = '<h5><span style="color: red">任務(wù):</span>' + todoMsg + '</h5>'; 34 // 追加到任務(wù)列表 35 msgList = (msgList == null ? '' : msgList) + todoMsgHtml; 36 localStorage.setItem("msgList", msgList); 37 // 刷新任務(wù)列表 38 document.getElementById("todoList").innerHTML = msgList; 39 }); 40 // 清空任務(wù)列表并刷新瀏覽器 41 $("#clearMsg").click(function () { 42 localStorage.clear(); 43 document.getElementById("clearMsg").innerHTML = ""; 44 location.reload(); 45 }); 46 </script> 47 </body> 48 </body> 49 </html>?------------------------------------------------------------------------------------------------------
總結(jié)：功能簡單，主要體會下localStorage的用法。
下一步打算寫個漂亮點的任務(wù)看板放到云服務(wù)器上給大家免費試用，無需登錄即可快速創(chuàng)建任務(wù)(基于瀏覽器Cookie存儲)，
同時具備微信掃碼登錄功能，可將任務(wù)同步到服務(wù)器永久保存，也可以一鍵導(dǎo)出任務(wù)列表到本地磁盤。
?
轉(zhuǎn)載于:https://www.cnblogs.com/jun1019/p/10988683.html
總結(jié)
以上是生活随笔為你收集整理的使用localStorage写一个简单的备忘录的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Git Gitlab 使用指南之Tor
- 下一篇： JS中的prototype、__prot