使用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. 一篇别人写的Kmp算法的讲解，多看多得

    kmp算法的理解与实现 博客分类: algorithms 算法      KMP算法曾被我戏称为看毛片算法,当时笑喷......大三那个时候硬着头皮把算法导论的kmp算法啃完,弄懂了kmp算法 的原理 ...

  2. DNS BIND配置 配置基本缓存服务器 DNS正向解析 DNS反向解析

    一. 缓存服务器配置 1.DNS:BIND    Berkeley Internet Name Domain    版本bind97: RPM服务器端包的名字  安装bind-libs    bind ...

  3. python高级特性-迭代

    概述 for  v   in d.values(): for k,v  in d.items(): for  a    in 'adfa': #判断对象是否可迭代 from collections i ...

  4. 《你说对就队》第九次团队作业：【Beta】Scrum meeting 1

    <你说对就队>第九次团队作业:[Beta]Scrum meeting 1 项目 内容 这个作业属于哪个课程 [教师博客主页链接] 这个作业的要求在哪里 [作业链接地址] 团队名称 < ...

  5. java中equals和==的使用

    ==可以用来比较基本数据类型和引用数据类型,在进行基本数据类型的比较时,比较的具体的值,进行引用数据类型比较,比较的是引用指向对象在内存中的地址,但是String进行比较需要注意 package cn ...

  6. [VSCode] Custom settings

    { // UI IMPROVEMENTS —————————————————— // Part 1. "editor.minimap.enabled": false, " ...

  7. Diworth定理

    Diworth定理 一个序列中下降子序列的最少划分数个数等于最长上升子序列的长度. 一个序列中上升子序列的最少划分数个数等于最长下降子序列的长度. 每句中的前后两者互为偏序关系. 例题: Descri ...

  8. Kafka 通过python简单的生产消费实现

    使用CentOS6.5.python3.6.kafkaScala 2.10  - kafka_2.10-0.8.2.2.tgz (asc, md5) 一.下载kafka 下载地址 https://ka ...

  9. VS - Microsoft.Practices.EnterpriseLibrary.Logging

    string fileName = AppDomain.CurrentDomain.BaseDirectory + "\\log.txt";File.AppendAllText(f ...

  10. pt

    https://www.hdarea.co/torrents.php http://hdhome.org/torrents.php https://ourbits.club/torrents.php ...