使用localStorage写一个简单的备忘录

使用html+js实现一个简单的备忘录,主要体会一下localStorage的用法。

先看看效果图:

使用localStorage写一个简单的备忘录_第1张图片

在输入框中输入文字,点击保存按钮,文本内容会在下放展示出来,

然后刷新下浏览器,会发现文本内容不会丢失,这是因为文本内容被保存到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 = '
任务:' + todoMsg + '
'; 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存储),

同时具备微信扫码登录功能,可将任务同步到服务器永久保存,也可以一键导出任务列表到本地磁盘。

 

转载于:https://www.cnblogs.com/jun1019/p/10988683.html

你可能感兴趣的:(使用localStorage写一个简单的备忘录)