本案例练习了jQuery对localStorage数据的操作,练习了一些常用的jQuery的方法
1 引入jQuery库
<script src="js/jquery.min.js"></script>
2 编写html
这是一段很简洁的html框架
<header>
<section>
<label for="title">ToDoList</label>
<input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
</section>
</header>
<section>
<h2>正在进行 <span id="todocount"></span></h2>
<ol id="todolist" class="demo-box">
</ol>
<h2>已经完成 <span id="donecount"></span></h2>
<ul id="donelist">
</ul>
</section>
3 编写css
body {
margin: 0;
padding: 0;
font-size: 16px;
background: #CDCDCD;
}
header {
height: 50px;
background: #333;
background: rgba(47, 47, 47, 0.98);
}
section {
margin: 0 auto;
}
label {
float: left;
width: 100px;
line-height: 50px;
color: #DDD;
font-size: 24px;
cursor: pointer;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
header input {
float: right;
width: 60%;
height: 24px;
margin-top: 12px;
text-indent: 10px;
border-radius: 5px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
border: none
}
input:focus {
outline-width: 0
}
h2 {
position: relative;
}
span {
position: absolute;
top: 2px;
right: 5px;
display: inline-block;
padding: 0 5px;
height: 20px;
border-radius: 20px;
background: #E6E6FA;
line-height: 22px;
text-align: center;
color: #666;
font-size: 14px;
}
ol,
ul {
padding: 0;
list-style: none;
}
li input {
position: absolute;
top: 2px;
left: 10px;
width: 22px;
height: 22px;
cursor: pointer;
}
p {
margin: 0;
}
li p input {
top: 3px;
left: 40px;
width: 70%;
height: 20px;
line-height: 14px;
text-indent: 5px;
font-size: 14px;
}
li {
height: 32px;
line-height: 32px;
background: #fff;
position: relative;
margin-bottom: 10px;
padding: 0 45px;
border-radius: 3px;
border-left: 5px solid #629A9C;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
ol li {
cursor: move;
}
ul li {
border-left: 5px solid #999;
opacity: 0.5;
}
li a {
position: absolute;
top: 2px;
right: 5px;
display: inline-block;
width: 14px;
height: 12px;
border-radius: 14px;
border: 6px double #FFF;
background: #CCC;
line-height: 14px;
text-align: center;
color: #FFF;
font-weight: bold;
font-size: 14px;
cursor: pointer;
}
footer {
color: #666;
font-size: 14px;
text-align: center;
}
footer a {
color: #666;
text-decoration: none;
color: #999;
}
@media screen and (max-device-width: 620px) {
section {
width: 96%;
padding: 0 2%;
}
}
@media screen and (min-width: 620px) {
section {
width: 600px;
padding: 0 10px;
}
}
4 编写jQuery代码
$(function() {
load();
// 先读取原来本地存储的数据
function getDate() {
var data = localStorage.getItem("todolist");
if (data !== null) {
// 本地存储里面的数据是字符串格式
return JSON.parse(data);
} else {
return [];
}
}
// 本地存储数据
function saveData(obj) {
obj = JSON.stringify(obj)
localStorage.setItem("todolist", obj);
}
// 页面渲染数据
function load() {
$("#todolist,#donelist").empty();
var data = localStorage.getItem("todolist");
data = JSON.parse(data);
$.each(data, function(i, val) {
var li = $("<li index=" + i + "></li>"); // 自定义属性最好是在创建的时候赋予
if (val.done === false) {
$(li).html('<input type="checkbox" name="" id=""><p>' + val.title + '</p><a href="javascript:;"></a>');
$("#todolist").prepend(li);
} else {
$(li).html('<input type="checkbox" name="" id="" checked><p>' + val.title + '</p><a href="javascript:;"></a>');
$("#donelist").prepend(li);
}
});
}
$("#title").on("keydown", function(e) {
if (e.keyCode === 13) {
//先读取原来本地存储的数据
var local = getDate();
//2 吧local数组进行更新数据 吧最新的数据追加给local数组
$(this).val() && local.push({
title: $(this).val(),
done: false
});
// 把这个数组存储给本地存储
saveData(local);
// 把数据渲染到页面中
load();
// 将title里面的值清除
$("#title").val("");
}
});
// 点击删除按钮删除本条消息
// 先添加索引号
$("ul,ol").on("click", "a", function() {
var index = parseInt($(this).parent().attr("index"));
var data = getDate();
data.splice(index, 1);
saveData(data);
load();
});
$("ol,ul").on("change", "input", function() { //如果单独给input设计事件多次点击无效
var index = parseInt($(this).parent().attr("index"));
var data = getDate();
if ($(this).prop("checked")) {
data[index].done = true;
} else {
data[index].done = false;
}
saveData(data);
load();
});
});