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请求时携带传递,损耗带宽,可设置访问路 ...
随机推荐
- memset使用技巧
memset可以对高位数组进行初始化,非常方便.需要注意的是memset的头文件是string.h和memory.h . 下面来谈memset的4个使用技巧: (注:一下dp高维数组都是全局变量,局部 ...
- 链表 | 递归删除不带头结点链表所有x元素
王道P37 T1 : 设计一个递归算法,删除不带头结点的单链表L中所有值为x的结点. 王道上的答案绝对是错的,我自己想了一个 函数主体 LinkList* del_x(LinkList* prior, ...
- nginx之fastcgi配置参数及其缓存
CGI的由来 最早的Web服务器只能简单地响应浏览器发来的HTTP请求,并将存储在服务器上的HTML文件返回给浏览器,也就是静态html文件,但是后期随着网站功能增多网站开发也越来越复杂,以至于出现动 ...
- 使用charles对jmeter进行抓包
- [技术博客]使用PanResponder实现响应左右滑动手势
在实现用户左右滑动完成不同操作时,使用react-native的官方API--PanResponder响应用户手势操作. PanResponder介绍 PanResponder中文文档 PanResp ...
- 【转】Android 破解视频App去除广告功能详解及解决办法总结
Android 破解视频App去除广告功能 作为一个屌丝程序猿也有追剧的时候,但是当打开视频app的时候,那些超长的广告已经让我这个屌丝无法忍受了,作为一个程序猿看视频还要出现广告那就是打我脸,但是我 ...
- 线程：Java中wait、notify、notifyAll使用详解
基础知识 首先我们需要知道,这几个都是Object对象的方法.换言之,Java中所有的对象都有这些方法. public final native void notify(); public final ...
- 内存映射文件MappedByteBuffer和Buffer的Scattering与Gathering
上一篇讲到的DirectByteBuffer继承自MappedByteBuffer 一.MappedByteBuffer MappedByteBuffer的定义: A direct byte buff ...
- maven本地仓库已经有了所需的jar包，为什么还要去请求远程仓库
问题 IDEA 中的maven 项目,一个jar包一直导入不进来,reimport 无效.从另一仓库把这个jar包拷贝到当前仓库,还是无效.mvn clean install -e U 发现加载这个j ...
- Ubuntu 安装最新版 (1.12) Golang 并使用 go mod
wget https://dl.google.com/go/go1.12.4.linux-amd64.tar.gz sudo tar -zxvf go1.12.4.linux-amd64.tar.gz ...