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请求时携带传递,损耗带宽,可设置访问路 ...
随机推荐
- uniapp 组件传参
父组件 <v-sub @returnDate=returnDate :backGround=backGround></v-sub> import vSub from " ...
- nginx.conf 配置解析之文件结构
nginx.conf配置文件结构如下: ...... #主要定义nginx的全局配置 events{ #events(事件)块:主要配置网络连接相关 } http{ #http块:代理缓存和日志定义绝 ...
- java8 新特性parallelStream 修改默认多线程数量
parallelStream默认使用了fork-join框架,其默认线程数是CPU核心数. 通过测试实践,发现有两种方法来修改默认的多线程数量: 1.全局设置 在运行代码之前,加入如下代码: Syst ...
- 部署oVirt4.2+Gluster超融合架构
首先下载最新ovirt-node iso镜像 准备3台机器,配置为2核,16G内存,两块硬盘,1块100G装系统,1块300G做存储 node1.com(192.168.105.221) node2. ...
- docker之修改存储位置
#停止docker 1.systemctl stop docker 2.mkdir /home/docker-lib #在我这个项目里home是普通硬盘,在home下创建一个目录3.mv /var ...
- BiseNet阅读总结
一.思路 语义分割既需要丰富的空间信息,又需要较大的感受野.然而,现代方法通常会牺牲空间分辨率来实现实时推理速度,导致性能低下.本文提出了一种新的双边分割网络(BiSeNet)来解决这一难题.我们首先 ...
- 灵活的MyBatis
一.前言 将数据存储到数据库是开发中很重要的一环.曾经有程序员说自己做过最牛逼的事情就是增删改查.确实我们做了很多页面,后太代码写了很多,可是最终都离不开数据库的增删改查.Java有一套自己的JPA标 ...
- WDM驱动改可手动加卸载的NT驱动
WDM驱动改可手动加卸载的NT驱动 测试工具:osrloader 把一个WDM类型的驱动改成可动态加载/卸载,需要做以下2个修改: 1. 把SOURCES文件夹中的DRIVERTYPE=WDM去掉 2 ...
- jenkins安装启动(docker)
mkdir /opt/jenkins -pvim /opt/jenkins/Dockerfile FROM jenkins/jenkins:lts EXPOSE 8080 50000 vim /opt ...
- Future home of something quite cool.
我绑定二级域名的时候显示内页如下,怎么办??一级主域名没问题呀~ Future home of something quite cool.If you're the site owner, log i ...