使用localStorage寫一個簡單的備忘錄

時間 2019-12-05

標籤使用 localstorage 一個簡單備忘錄简体版

原文原文鏈接

使用html+js實現一個簡單的備忘錄，主要體會一下localStorage的用法。html

先看看效果圖：jquery

在輸入框中輸入文字，點擊保存按鈕，文本內容會在下放展現出來，瀏覽器

而後刷新下瀏覽器，會發現文本內容不會丟失，這是由於文本內容被保存到localStorage中了，服務器

能夠理解爲保存到了瀏覽器的Cookie中。再點擊"清空本地存儲",會發現下方的文本都沒有了。微信

--------------------------------------------------------------------------------------spa

代碼：code

 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>