使用localStorage写一个简单的备忘录
使用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写一个简单的备忘录的更多相关文章
- 用Python写一个简单的Web框架
一.概述 二.从demo_app开始 三.WSGI中的application 四.区分URL 五.重构 1.正则匹配URL 2.DRY 3.抽象出框架 六.参考 一.概述 在Python中,WSGI( ...
- 如何写一个简单的http服务器
最近几天用C++写了一个简单的HTTP服务器,作为学习网络编程和Linux环境编程的练手项目,这篇文章记录我在写一个HTTP服务器过程中遇到的问题和学习到的知识. 服务器的源代码放在Github. H ...
- 如何写一个简单的shell
如何写一个简单的shell 看完<UNIX环境高级编程>后我就一直想写一个简单的shell来作为练习,因为有事断断续续的写了好几个月,如今写了差不多来总结一下. 源代码放在了Github: ...
- 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- 一步一步写一个简单通用的makefile(三)
上一篇一步一步写一个简单通用的makefile(二) 里面的makefile 实现对通用的代码进行编译,这一章我将会对上一次的makefile 进行进一步的优化. 优化后的makefile: #Hel ...
- Java写一个简单学生管理系统
其实作为一名Java的程序猿,无论你是初学也好,大神也罢,学生管理系统一直都是一个非常好的例子,初学者主要是用数组.List等等来写出一个简易的学生管理系统,二.牛逼一点的大神则用数据库+swing来 ...
- (2)自己写一个简单的servle容器
自己写一个简单的servlet,能够跑一个简单的servlet,说明一下逻辑. 首先是写一个简单的servlet,这就关联到javax.servlet和javax.servlet.http这两个包的类 ...
- express 写一个简单的web app
之前写过一个简单的web app, 能够完成注册登录,展示列表,CURD 但是版本好像旧了,今天想写一个简单的API 供移动端调用 1.下载最新的node https://nodejs.org/zh- ...
- 写一个简单的C词法分析器
写一个简单的C词法分析器 在写本文过程中,我参考了<词法分析器的实现>中的一些内容.这里我们主要讨论写一个C语言的词法分析器. 一.关键字 首先,C语言中关键字有: auto.break. ...
随机推荐
- 使用vue打包,vendor文件过大,或者是app.js文件很大
我的解决办法: 1.把不常改变的库放到index.html中,通过cdn引入,比如下面这样: 然后找到build/webpack.base.conf.js文件,在 module.exports = { ...
- 《你又怎么了我错了行了吧》【Beta】Scrum meeting 3
第三天 日期:2019/6/26 前言: 第3次会议在女生宿舍召开(前一天晚上开的) 项目全部基本测试完成,解决了多处bug,明天终于可以拿去演示了.... 1.1 今日完成任务情况.成员贡献时间及工 ...
- 如何从notepad++的偏移量查找
有的时候报错的会把偏移量直接报错给我们,我就需要根据偏移量定位我们的错误. 比如他报错偏移量1009. 做搜索(按Ctrl + F) 选择Regular expressions并确保有. matche ...
- 列举 Python2和Python3的区别?
1.print 在python2中,print被视为一个语句而不是一个函数,python3中,print()被视为一个函数 2.整数的除法 在python2中,键入的任何不带小数的数字,将被视为整数的 ...
- java.util.Properties 读取配置文件中的参数
用法 getProperty方法的返回值是String类型. java.util.Properties 读取配置文件中的参数 //读取配置文件 FileInputStream inStream = n ...
- ps -ef、ps aux(查看进程占用内存大小)
Linux下ps -ef和ps aux的区别及格式详解 Linux下显示系统进程的命令ps,最常用的有ps -ef 和ps aux.这两个到底有什么区别呢?两者没太大差别,讨论这个问题,要追溯到Uni ...
- Saltstack cmd.run 多项命令
cmd.run 执行多个命令: sls 示例: add_site: cmd.run: - name: | C:\Windows\System32\inetsrv\appcmd.exe delete s ...
- POJ 2987 Firing 最大流 网络流 dinic 模板
https://www.cnblogs.com/137shoebills/p/9100790.html http://poj.org/problem?id=2987 之前写过这道题,码一个dinic的 ...
- spark sql 常用语句
在spark dataFrame数据结构里面使用sql语句查询数据 (因为是RDD和dataFrame数据是只读的,所以不能做修改,删除操作.) 首先将文本数据转换为DataFrame数据格式 有两种 ...
- 9、共享变量(Broadcast Variable和Accumulator)
一.共享变量 1.共享变量工作原理 Spark一个非常重要的特性就是共享变量. 默认情况下,如果在一个算子的函数中使用到了某个外部的变量,那么这个变量的值会被拷贝到每个task中.此时每个task只能 ...