todolist 包含本地存储知识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>todolist_again</title>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.fat {
width: 500px;
height: 800px;
margin: 50px auto;
}
h1 {
font-size: 38px;
color: goldenrod;
display: inline;
margin-right: 40px;
/* vertical-align: middle; */
}
.todoinput {
width: 300px;
height: 50px;
line-height: 50px;
border-radius: 10px;
border: 2px solid rgb(245, 161, 102);
font-size: 28px;
text-align: center;
outline-style: none;
/* outline-color: brown; */
/* input获得焦点时，默认会出现一个蓝色外边框，设置outline属性，或者border属性，能清除该默认样式 */
}
h3 {
font-size: 34px;
float: left;
}
#todocount,#donecount {
width: 30px;
height: 40px;
line-height: 40px;
border-radius: 10px;
background: goldenrod;
display: block;
float: right;
margin-top: 2px;
text-align: center;
color:white;
}
.clearfix:after {
display: block;
height: 0;
line-height: 0;
content: "";
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1;
}
.main {
margin-top: 40px;
margin-bottom: 20px;
}
li {
width: 100%;
background: olive;
border-radius: 7px;
height: 30px;
line-height: 30px;
margin-top: 10px;
list-style: none;
position: relative;
}
#donelist li{
opacity: .6;
}
.check {
width: 21px;
height: 21px;
margin-left: 10px;
vertical-align: middle;
}
.content {
color: white;
margin-left: 28px;
font-family: '宋体';
font-size: 18px;
}
.del {
width: 16px;
height: 16px;
border-radius: 7px;
background: orangered;
display: block;
position: absolute;
right: 8px;
top: 15px;
margin-top: -8px;
} </style>
</head>
<body>
<section class="fat">
<section>
<!-- οnfοcus="this.placeholder=''" οnblur="this.placeholder='添加todo'" -->
<h1>todolist</h1><input type="text" placeholder="添加todo" class="todoinput">
</section> <section class="main">
<section class="clearfix">
<h3>正在进行</h3><span id="todocount"></span>
</section>
<ol id="todolist">
<!-- <li>
<input type="checkbox" class="check"><span class="content">了jog了</span><a href="###" class="del"></a>
</li> -->
</ol>
</section> <section class="main">
<section class="clearfix">
<h3>已完成</h3><span id="donecount"></span>
</section>
<ul id="donelist"> </ul>
</section>
</section> <script>
$(function(){
// 每次刷新页面，都要直接显示原有的本地数据，即一刷新就将本地存储中已有的数据渲染到页面
load(); // input框获得焦点时，清空placeholder
$('.todoinput').focus(function() {
$(this).prop("placeholder","");
// $(this).attr("style",'background:rgba(224,150,150,0.3);');//设置获得光标时输入框的背景颜色
});
// input框失去焦点时，设置placeholder
$('.todoinput').blur(function() {
$(this).prop("placeholder",'添加todo');
// $(this).attr("style",'background:;');
}); // 读取本地存储的数据，更新本地存储数据，保存本地存储数据，将本地存储数据渲染到页面
$('.todoinput').on('keydown',function(e) {
// 回车事件
if(e.keyCode===13) {
if($(this).val()=="") {
alert("输入内容不能为空！");
}else {
// 先获取本地存储中的数据
var local = getData();
// 更新数据
local.push({title: $(this).val(),done:false});
// 更新后的数据保存到本地存储
saveData(local);
//渲染页面
load(); $(this).val("");// 回车后要将input框的内容清空
$(this).prop("placeholder",'添加todo');//回车后回复placeholder
// $(this).attr("style",'background:;');//回车后回复输入框背景颜色
// 回车后如何失去光标？？？？？？？？？？？？？？？？
}
}
}); // 读取本地存储数据
function getData() {
var data = localStorage.getItem("list");//读取本地存储中的数据，注意本地存储的数据只能是字符串格式
// -------------console.log(typeof(data));//string
if(data !== null){//如果有数据，就将字符串数据转json对象并返回数据
return JSON.parse(data);//JSON.parse()里面必须是一个字符串 如果此处报错，可能是data为undefined，可能是本地存储中的数据格式错误，application清空数据即可
}else{//如果没有数据就返回一个空数组
return [];
}
} // 保存本地存储数据 注意本地存储数据都是字符串类型
function saveData(param) {
localStorage.setItem("list",JSON.stringify(param));
}; // 加载本地存储数据渲染到页面中
function load() {
var hh = getData();//获取本地数据，得到的是字符串数组
// 回车事件调用渲染方法时，每次都将本地存储的所有数据遍历一遍添加进列表，如果不先清除列表的话，再加载又会重新渲染一次之前的数据。所以：遍历本地存储之前，先将ul,ol的数据清空
$('ul,ol').empty();
// 计算正在进行的事件数量，已经完成的事件数量
var todocount=0;
var donecount=0;
// 遍历数组
$.each(hh,function(i,n) {
// 本地存储里的数据分两种，已经完成的和正在进行的
if(n.done==false){
// 如果遍历到的当前元素是正在进行的数据，放入对应的ol中
$('ol').prepend("<li><input type='checkbox' class='check'><span class='content'>"+n.title+"</span><a href='javascript:;' class='del' id="+i+"></a></li>");
todocount++;//每添加一个Li,count加1
}else if(n.done==true) {
$('ul').prepend("<li><input type='checkbox' class='check' checked='false'><span class='content'>"+n.title+"</span><a href='javascript:;' class='del' id="+i+"></a></li>");
donecount++;
}
});
// 将count值赋值给span 注意用val()无效 一刷新页面就有数据，回车就有数据，所以写在load()里面
$('#todocount').text(todocount);
$('#donecount').text(donecount);
}; // 点击复选框，ul,ol的数据相互切换 修改done属性，done为false就是正在进行，done为true就是已完成
$('ul,ol').on('click','input',function() {
//获取本地存储数据
var data = getData();
// 找到当前li所对应的本地存储中的数据，将该数据的done属性修改
var index = $(this).siblings('a').attr('id');//获取自定义属性用attr()
console.log($(this).prop('checked'));//被选中的复选框checked属性为true
console.log($(this).parent().siblings('li').children('input').prop('checked'));//未被选中的复选框checked属性为false
//-----------------将复选框的checked属性值赋给done false or true
// ？为什么点击正在进行的复选框不会勾选----------因为一点击，就重新渲染页面把该条数据给放到已完成列表了
data[index].done = $(this).prop('checked');
// 将具有新checked属性的数据保存在本地存储
saveData(data);
// 重新渲染页面
load();
}); // 点击a标签删除当前li ！！！！！！！！！！！！注意：不是删除页面元素，而是从本地存储中删除数据
$('ul,ol').on('click','a',function() {//注意！！！？？？？？直接用类名表示两个列表中的a标签会出问题，为什么？？？？？？？？？？？？？？？？？？？
var info = getData();
// 获取到当前a的索引号，然后从本地存储中找到相对应索引号的数据，删除
var index = $(this).attr("id");
// 删除数组的某个元素用splice(数组下标,个数)
info.splice(index,1);//从索引index处开始，删除一个元素
saveData(info);
load();
}); }) </script>
</body>
</html>
todolist 包含本地存储知识的更多相关文章
- HTML5移动开发实战必备知识——本地存储(2)
了解了一些主要的本地存储使用方法和思想后.我们来系统的介绍一下本地存储. 本地存储分为三大类:localStorage/sessionStorage/本地数据库 localStorage和sessio ...
- HTML5移动开发实战必备知识——本地存储(1)
本地缓存是HTML5出现的新技术,这个技术的出现使得移动web的开发成为了可能.我们都知道.要想打造一个高性能的移动应用,速度是关键.而在HTML5之前.仅仅有cookie可以存储数据,大小仅仅有4k ...
- HTML5笔记：跨域通讯、多线程、本地存储和多图片上传技术
最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...
- HTML5 学习总结（三）——本地存储
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- HTML5本地存储——IndexedDB（一：基本使用）
在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...
- HTML5 学习总结（三）——本地存储（localStorage、sessionStorage、WebSqlDataBase、IndexedDB）
HTML5问世以后,前端加入了一个重要的功能,便是本地存储,本地存储可分为4类: Local Storage:总的存储量有所限制,并不能提供真正的检索API,数据的生命期比窗口或浏览器的生命期长,数据 ...
- HTML5 本地存储实现购物车功能
在家休陪产假,无聊,看自己以前的项目,突然发现之前写的购物车都是用数据库实现的,数据库实现购物车原则上没什么问题,但是需要和数据库交互,这样无意之间降低了程序的效率.今天突发奇想,如果能用HTML5本 ...
- HTML5本地存储——IndexedDB
在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...
- 前端之本地存储和jqueryUI
本地存储 本地存储分为cookie,以及新增的localStorage和sessionStorage 1.cookie 存储在本地,容量最大4k,在同源的http请求时携带传递,损耗带宽,可设置访问路 ...
随机推荐
- A1016 | 磨人的大模拟
这题写得头晕……明天我再评价 #include <stdio.h> #include <memory.h> #include <math.h> #include & ...
- 洛谷 P1972 [SDOI2009]HH的项链-二维偏序+树状数组+读入挂(离线处理，思维，直接1~n一边插入一边查询)，hahahahahahaha~
P1972 [SDOI2009]HH的项链 题目背景 无 题目描述 HH 有一串由各种漂亮的贝壳组成的项链.HH 相信不同的贝壳会带来好运,所以每次散步完后,他都会随意取出一段贝壳,思考它们所表达的含 ...
- 各软件发布版本简写(Alpha Beta RC GA DMR)
Alpha:是内部测试版,一般不向外部发布,会有很多Bug.一般只有测试人员使用. Beta:也是测试版,这个阶段的版本会一直加入新的功能.在Alpha版之后推出. RC:(Release Candi ...
- nginx 访问控制之 限速
nginx限速可以通过 ngx_http_limit_conn_module 和 ngx_http_limit_req_module 模块来实现限速的功能. 一.ngx_http_limit_conn ...
- plsql tables 表存在，但是看不到所有的表信息
1.情景展示 tables目录存在,但是看不到该数据库下的表信息. 2.解决方案 对比同事的发现,原来是选错用户了. 将用户切换为当前用户就行了,不知道什么时候搞成所有用户了. 写在最后 哪位大佬 ...
- 冰多多团队Beta阶段发布说明
Bingduoduo 语音Coding(Beta):项目Github地址 Beta版本新功能介绍 在beta阶段我们很好地将alpha阶段已经设计好的编辑器和shell整合了起来,推出了一个完整的ID ...
- Java finally未被执行的情况
一种是先执行了用于终止程序的System.exit()方法,或进程被关闭 还有一种情况是,当前线程一直在执行,在一些业务逻辑里面跳不出来,看上去就像finally一直未被执行 线程被终止的时候也会执行 ...
- Spring Boot-JPA、Hibernate、Spring data jpa之间的关系
什么么是JPA? 全称Java Persistence API,可以通过注解或者XML描述[对象-关系表]之间的映射关系,并将实体对象持久化到数据库中. 为我们提供了: 1)ORM映射元数据:JPA支 ...
- ubuntu16 修改gitlab root密码
搭建了一个gitlab的git服务器,默认的管理员为root; 长时间不用root忘记了root密码: 我们可以在服务器上直接重置root的密码: 以下操作在终端下执行 #进入gitlab控制台 su ...
- Go1.13 标准库的 http 包爆出重大 bug，你的项目中招了吗？ 原创： 王亚楼 Go语言中文网 今天
Go1.13 标准库的 http 包爆出重大 bug,你的项目中招了吗? 原创: 王亚楼 Go语言中文网 今天