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

先看看效果图：

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

然后刷新下浏览器，会发现文本内容不会丢失，这是因为文本内容被保存到localStorage中了，

可以理解为保存到了浏览器的Cookie中。再点击"清空本地存储",会发现下方的文本都没有了。

--------------------------------------------------------------------------------------

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>HTML5-任务列表</title>

 </head>

 <body>

 <body>

 <div>

     <input id="todoMsg" type="text" width='200'></input>

     <input id="saveMsg" type="button" value="保存"/>

     <input id="clearMsg" type="button" value="清空本地存储"/>

     <p style="color: #286090;font-size: 20px;">任务列表</p>

     <hr/>

     <div id="todoList"></div>

 </div>

 <script src="https://code.jquery.com/jquery-1.11.1.js"></script>

 <script>

     // 从本地存储加载任务列表

     var msgList = localStorage.getItem("msgList");

     if (msgList !== null && msgList !== undefined && msgList != '') {

         // 展示任务列表

         document.getElementById("todoList").innerHTML = msgList;

     }

     // 添加并保存单个任务

     $("#saveMsg").click(function () {

         var todoMsg = document.getElementById("todoMsg").value;

         if (todoMsg == null || todoMsg == '') {

             alert("请输入任务")

             return;

         }

         var todoMsgHtml = '<h5><span style="color: red">任务:</span>' + todoMsg + '</h5>';

         // 追加到任务列表

         msgList = (msgList == null ? '' : msgList) + todoMsgHtml;

         localStorage.setItem("msgList", msgList);

         // 刷新任务列表

         document.getElementById("todoList").innerHTML = msgList;

     });

     // 清空任务列表并刷新浏览器

     $("#clearMsg").click(function () {

         localStorage.clear();

         document.getElementById("clearMsg").innerHTML = "";

         location.reload();

     });

 </script>

 </body>

 </body>

 </html>

------------------------------------------------------------------------------------------------------

总结：功能简单，主要体会下localStorage的用法。

下一步打算写个漂亮点的任务看板放到云服务器上给大家免费试用，无需登录即可快速创建任务(基于浏览器Cookie存储)，

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

使用localStorage写一个简单的备忘录的更多相关文章

  1. 用Python写一个简单的Web框架

    一.概述 二.从demo_app开始 三.WSGI中的application 四.区分URL 五.重构 1.正则匹配URL 2.DRY 3.抽象出框架 六.参考 一.概述 在Python中,WSGI( ...

  2. 如何写一个简单的http服务器

    最近几天用C++写了一个简单的HTTP服务器,作为学习网络编程和Linux环境编程的练手项目,这篇文章记录我在写一个HTTP服务器过程中遇到的问题和学习到的知识. 服务器的源代码放在Github. H ...

  3. 如何写一个简单的shell

    如何写一个简单的shell 看完<UNIX环境高级编程>后我就一直想写一个简单的shell来作为练习,因为有事断断续续的写了好几个月,如今写了差不多来总结一下. 源代码放在了Github: ...

  4. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  5. 一步一步写一个简单通用的makefile(三)

    上一篇一步一步写一个简单通用的makefile(二) 里面的makefile 实现对通用的代码进行编译,这一章我将会对上一次的makefile 进行进一步的优化. 优化后的makefile: #Hel ...

  6. Java写一个简单学生管理系统

    其实作为一名Java的程序猿,无论你是初学也好,大神也罢,学生管理系统一直都是一个非常好的例子,初学者主要是用数组.List等等来写出一个简易的学生管理系统,二.牛逼一点的大神则用数据库+swing来 ...

  7. （2）自己写一个简单的servle容器

    自己写一个简单的servlet,能够跑一个简单的servlet,说明一下逻辑. 首先是写一个简单的servlet,这就关联到javax.servlet和javax.servlet.http这两个包的类 ...

  8. express 写一个简单的web app

    之前写过一个简单的web app, 能够完成注册登录,展示列表,CURD 但是版本好像旧了,今天想写一个简单的API 供移动端调用 1.下载最新的node https://nodejs.org/zh- ...

  9. 写一个简单的C词法分析器

    写一个简单的C词法分析器 在写本文过程中,我参考了<词法分析器的实现>中的一些内容.这里我们主要讨论写一个C语言的词法分析器. 一.关键字 首先,C语言中关键字有: auto.break. ...

随机推荐

  1. PAT1016 × PAT1017

    本次题解是综合1016和1017两道题来讲解,原因无他,因为这两道都是模拟题,综合字符串处理.排序等考点 接手一道模拟题,一定要快速且准确地了解模拟的过程,清晰题目涉及的关键信息.比如1016要计算电 ...

  2. springboot 之 使用poi进行数据的导出(一)

    使用的是idea+restful风格 第一:引入依赖为: <!--poi--> <dependency> <groupId>org.apache.xmlbeans& ...

  3. 最快速的办法解决MySQL数据量增大之后翻页慢问题

    MySQL最易碰到的性能问题就是数据量逐步增大之后的翻页速度变慢的额问题,而且越往后翻页速度越慢,如果用最快速的办法解决,以下就是解决办法,简单方便. 1.问题现状 现有MySQL数据表 event_ ...

  4. 用Visio画流程图

    一:基本流程图 主要用于创建流程图.顺序图.信息跟踪图.流程规划图和结构预测图,包含了形状.连接线和链接. 步骤: (1)打开Visio,单击"类别"->"流程图& ...

  5. 行为型模式(六) 状态模式（State）

    一.动机(Motivate) 在软件构建过程中,某些对象的状态如果改变,其行为也会随之而发生变化,比如文档处于只读状态,其支持的行为和读写状态支持的行为就可能完全不同.   如何在运行时根据对象的状态 ...

  6. Vue 项目目录结构分析

    Vue项目目录结构分析 ├── v-proj | ├── node_modules // 当前项目所有依赖,一般不可以移植给其他电脑环境 | ├── public | | ├── favicon.ic ...

  7. navcat导入mysql.sql出现：2006, 'MySQL server has gone away'

    navcat导入mysql.sql出现:2006, 'MySQL server has gone away' OperationalError (2006, ‘MySQL server has gon ...

  8. 二维$MLE$线段树

    关于二维线段树,ta死了 先来看看两种二维线段树的打法 1.四叉树 然而ta死了,ta是$\Theta (n)$的,加上线段树的常数,$T$飞稳 2.线段树套线段树 我尽量画出来... 图中每个方块是 ...

  9. leetcode解题报告（32）：Teemo Attacking

    描述 In LLP world, there is a hero called Teemo and his attacking can make his enemy Ashe be in poison ...

  10. Bzoj 2818: Gcd(莫比乌斯反演)

    2818: Gcd Time Limit: 10 Sec Memory Limit: 256 MB Description 给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的 数对 ...