localStorage
1 localStorage的简介
- localStorage是HTML5新增特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage保存在缓存里，只有手工删除或者清理浏览器缓存方可失效。在容量上也有一些限制，主要看浏览器的差异，Firefox3+、IE8+、Opera为5M，，Chrome和Safari为2.5M。
2 localStorage 操作
2.1 创建操作
-
读操作
- localStorage.getItem(key)；
-
写操作
- localStorage.setItem(key,值);
- 值可以是对象，字符串，整数等；
2.2 删除操作
- localStorage.removeItem(key)
2.3 清空所有
- localStrorage.clear()
3 案例利用
- 需要的js插件
- jquery.js；
- bootstrap.js；
注意：导入bootstrap.js时导入bootstrap.css；
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
* {
margin: 10px;
}
</style>
<body>
<div class="main">
<h1></h1>
<div class="btn">
<button type="button">全部<span>0</span></button>
<button type="button">完成<span id="sp">0</span></button>
<button type="button">未完成<span>0</span></button>
<button type="button">点击刷新</button>
<button type="button">删除全部</button>
</div>
<div>
<label>任务</label><input type="" name="" id="inputs" value="" />
</div>
<div class="conntent">
</div>
</div>
<script type="text/javascript">
var temp = []
var index = 0;
var v_temp = localStorage.getItem("obj");
var p_temp = JSON.parse(v_temp)
//如果name为空
if (p_temp != null) {
for (let i of p_temp.name) {
temp.push(i)
}
task_but1();
}
//将信息存入localStorage
$('#inputs').on("change", function() {
var v = {
"name": `${this.value}`,
"suc": "0",
};
temp.push(v)
var persons = new Object()
persons.name = temp;
var obj = JSON.stringify(persons);
localStorage.setItem("obj", obj);
//获取数据
// var v = localStorage.getItem("obj");
// var p = JSON.parse(v)
})
//全部的情况
function task_but1() {
var v = localStorage.getItem("obj");
var p = JSON.parse(v)
for (let i of p.name) {
if (i.suc == "1") {
$(".conntent").append(
`<input type="checkbox" checked id="${i.name}" value="${i.name}" /><label for="${i.name}">${i.name}</label>`)
$(".conntent").append(`<br>`)
} else {
$(".conntent").append(
`<input type="checkbox" name="" id="${i.name}" value="${i.name}" /><label for="${i.name}">${i.name}</label>`)
$(".conntent").append(`<br>`)
}
}
var count1 = 0; //未完成计数
var count2 = 0; //完成计数
for (let i in p.name) {
if (p.name[i].suc == 0) {
count1++;
$("span").last().html(count1);
}
$("#sp").html(`${parseInt(i)+1-count1}`)
$("span").first().html(`${parseInt(i)+1}`)
}
}
$(".btn").children().eq(0).on("click", function() {
$(".conntent").detach();
$(".main").append("<div class='conntent'>");
task_but1()
refresh()
})
//完成的部分
function task_but2() {
var v = localStorage.getItem("obj");
var p = JSON.parse(v)
for (let i of p.name) {
if (i.suc == "1") {
$(".conntent").append(
`<input type="checkbox" checked id="${i.name}" value="${i.name}" /><label for="${i.name}">${i.name}</label>`)
$(".conntent").append(`<br>`)
}
}
}
$(".btn").children().eq(1).on("click", function() {
//刷新html页面
$(".conntent").detach();
$(".main").append("<div class='conntent'>");
task_but2()
refresh()
})
//未完成部分
function task_but3() {
var v = localStorage.getItem("obj");
var p = JSON.parse(v)
for (let i of p.name) {
if (i.suc == "0") {
$(".conntent").append(
`<input type="checkbox" id="${i.name}" value="${i.name}" /><label for="${i.name}">${i.name}</label>`)
$(".conntent").append(`<br>`)
}
}
}
$(".btn").children().eq(2).on("click", function() {
$(".conntent").detach();
$(".main").append("<div class='conntent'>");
task_but3()
refresh()
})
//通过点击input 修改完成情况,改变✔
function refresh() {
console.log($('.conntent').children().filter($('input')))
$('.conntent').children().on("click", function() {
console.log(this)
$(this).attr("id");
console.log($(this).attr("id"));
for (let i of temp) {
if (i.name == $(this).attr("id")) {
if (i.suc == 1) {
i.suc = 0;
} else {
i.suc = 1;
}
}
}
var persons = new Object()
persons.name = temp;
var obj = JSON.stringify(persons);
localStorage.setItem("obj", obj);
})
}
//刷新
$(".btn").children().eq(3).on("click",function(){
location.reload();
})
//删除全部
$(".btn").children().eq(4).on("click",function(){
localStorage.removeItem("obj")
})
</script>
</body>
</html>