使用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存储)，

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

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

使用localStorage写一个简单的备忘录相关推荐

用java做一个简单记事本_用记事本写一个简单的java程序
用记事本写一个简单的java程序第一步: 安装好jdk,并设置好环境变量. 桌面-计算机(右键)-属性-高级系统设置-环境变量-path-在变量值后加上:和jdk安装路径加上(路径即为C:\Prog ...
如何搭建python框架_从零开始:写一个简单的Python框架
原标题:从零开始:写一个简单的Python框架 Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发. 你为什么想搭建一个Web框架?我想有下面几个原因: 有一个 ...
ipad php mysql_如何用PHP/MySQL为 iOS App 写一个简单的web服务器（译） PART1
原文:http://www.raywenderlich.com/2941/how-to-write-a-simple-phpmysql-web-service-for-an-ios-app 作为一个i ...
python123程序设计题说句心里话_用c++写一个简单的计算器程序
// 050305.cpp : 定义控制台应用程序的入口点. // // 050304.cpp : 定义控制台应用程序的入口点. // //四则运算 #include "stdafx.h&q ...
用java写一个简单的区块链（下）
用java写一个简单的区块链(下) 2018年03月29日 21:44:35 java派大星阅读数:725 标签: 区块链java 更多个人分类: 区块链版权声明:本文为博主原创文章,转载请标明 ...
怎样用java写一个简单的文件复制程序
怎样用java写一个简单的文件复制程序代码来源:https://jingyan.baidu.com/article/c35dbcb0d6f1398916fcbc07.html package Num ...
给 asp.net core 写一个简单的健康检查
给 asp.net core 写一个简单的健康检查 Intro 健康检查可以帮助我们知道应用的当前状态是不是处于良好状态,现在无论是 docker 还是 k8s 还是现在大多数的服务注册发现大多都提供 ...
linux下Qt编写串口调试助手,如何在linux下用QT写一个简单的串口调试助手
如何在linux下用QT写一个简单的串口调试助手 QT5串口类在QT5以前,编写串口一般使用的是qextserialport类,但在QT5之后有了QT自带的串口类SerialPort(串口基础类)和 ...
如何写一个简单的node.js C 扩展
node 是由 c 编写的,核心的 node 模块也都是由 c 代码来实现,所以同样 node 也开放了让使用者编写 c 扩展来实现一些操作的窗口. 如果大家对于 require 函数的描述还有印象的 ...

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

使用localStorage写一个简单的备忘录相关推荐

最新文章

热门文章