目录
1.首先获取全选框元素，以及子复选框元素。随后先实现全选框以及自复选框的点击事件的基础功能：
2.全选按钮点击时改变所有的子复选框的选中状态的同时也需要将所有复选框包括自身的选中状态更新到本地存储中去
3.自复选框点击时除了判断全选框是否选中外也需要将自身的选中状态更新到本地存储中去。
4.本地存储数据以及改变，此时需要使用window.onstorage事件来实现另一个页面的复选框的选中状态的变化
实现如图的同步操作两个页面
知识点：
说到onstorage方法自然得提到本地存储Local Storage和Session Storage，也需要Local Storage来实现这个功能
简单点说：
Local Storage中的数据以键值对的形式存储且是字符串形式，有信息同源的规则，存储大小仅有4kb，里面的数据不会因为关闭浏览器而清空，可以长期存在浏览器中。而Session Storage与前者相同，不同的地方在于，Session Storage中的数据会在关闭浏览器时清空，安全性更高，但不会长久保存。二者都是浏览器提供用来存储数据的，存储在浏览器中，所以对于不同的页面来说的这里面的数据都是共享的，实现两个页面的同步操作原理也在于此。
本地存储写入的方法：
setItem方法为添加或者设置数据，get方法则为获取数据
localStorage.setItem("key","value")
localStorage.getItem("key")
sessionStorage.setItem("key","value")
sessionStorage.getItem("key") 而将数据写入本地存储则需要JSON（JavaScript Object Notation, JS对象简谱），需要以JSON的数据格式的字符串才可以写入本地存储， JSON本质上是对象，不同的是它的属性和值都需要包裹在引号内
var json = {
"name" : "laila",
"age" : 18,
"money" : 99999999,
"hobby" : ["打游戏","听歌"]
}JSON本质上是对象，而本地存储的存储形式是键值对形式的字符串，而将数据从本地存储中提取出来时都需要借助
JSON本身的方法：
//将json格式的字符串转换成json对象
JSON.parse()
//将json对象转换成json字符串数据
JSON.stringify()最后还有实现该功能的方法，也是本文标题
window.onstorage事件：
既然是事件，那么就有触发条件：当本地存储的数据发生改变时就会触发该事件。但是触发的事件方法会在另一个页面执行，并不会在当前页面执行。这是实现同步操作页面的原理。
了解这些后，就可以开始实现功能了
结构样式
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.main {
margin: 100px auto;
width: 500px;
height: 300px;
border: 1px solid orange;
border-radius: 10px;
background-color: orange;
overflow: hidden;
}
.all {
width: 100px;
height: 100px;
line-height: 100px;
}
ul {
border-top: 1px solid rgb(221, 208, 208);
display: flex;
height: 50px;
line-height: 50px;
background-color: antiquewhite;
}
ul li:nth-of-type(1) {
width: 100px;
}
ul li:nth-of-type(2) {
width: 300px;
}
</style>
<body>
<div class="main">
<div class="all">
全选 <input type="checkbox" class="allSelected">
</div>
<ul>
<li><input type="checkbox" class="son" id="one"></li>
<li>中分头</li>
</ul>
<ul>
<li><input type="checkbox" class="son" id="two"></li>
<li>背带裤</li>
</ul>
<ul>
<li><input type="checkbox" class="son" id="three"></li>
<li>篮球</li>
</ul>
<ul>
<li><input type="checkbox" class="son" id="four"></li>
<li>我是ikun你记住</li>
</ul>
</div>
</body>JS代码
1.首先获取全选框元素，以及子复选框元素。随后先实现全选框以及自复选框的点击事件的基础功能：
<script>
var all = document.getElementsByClassName("allSelected")[0];
var son = document.getElementsByClassName("son");
all.onclick = function () {
for (var i = 0; i < son.length; i++) {
son[i].checked = this.checked
}
}
/*function ：isAll
判断全选框的checked属性的值并返回该值
*/
function isAll() {
var flag = true;
for (var i = 0; i < son.length; i++) {
if (son[i].checked == false) {
return flag = false;
}
}
return flag
}
//循环绑定点击事件，点击子复选框时调用isAll将函数返回值赋给全选框的checked属性
for (var i = 0; i < son.length; i++) {
(function (i) {
son[i].onclick = function () {
all.checked = isAll()
}
})(i)
}
</script>2.全选按钮点击时改变所有的子复选框的选中状态的同时也需要将所有复选框包括自身的选中状态更新到本地存储中去
all.onclick = function () {
for (var i = 0; i < son.length; i++) {
son[i].checked = this.checked
//遍历子复选框时创建json对象，并将此时以及改变的自复选框选中状态值添加到对象中
var obj = {
"type": son[i].checked
}
/*
JSON.stringify()转化为json形式的字符串，
以使用localStorage.setItem()存储到本地存储中去
存储时以元素的id名为key值，以便获取
*/
var obj = JSON.stringify(obj)
localStorage.setItem(son[i].id, obj)
}
//结束遍历后，自身的选中状态也需要存储到本地存储中去
var obj = {
"type": this.checked
}
var obj = JSON.stringify(obj)
localStorage.setItem(this.className, obj)
}3.自复选框点击时除了判断全选框是否选中外也需要将自身的选中状态更新到本地存储中去。
for (var i = 0; i < son.length; i++) {
(function (i) {
son[i].onclick = function () {
all.checked = isAll()
var obj = {
"type": this.checked
}
var obj = JSON.stringify(obj)
localStorage.setItem(this.id, obj)
}
})(i)
}此时点击各复选框后local Storage中便会出现相应的选中状态数据，即：本地存储数据的改变
4.本地存储数据以及改变，此时需要使用window.onstorage事件来实现另一个页面的复选框的选中状态的变化
window.onstorage = function () {
//遍历子复选框并根据id名配对相应的选中状态值
for (var i = 0; i < son.length; i++) {
//localStorage.getItem()根据存储时使用的id名获取属性值
var type = localStorage.getItem(son[i].id)
//JSON.parse()转化为json数据对象随机进行赋值
type = JSON.parse(type)
son[i].checked = type.type
}
//同时也要给全选复选框的选中状态进行赋值
var type = localStorage.getItem(all.className)
type = JSON.parse(type)
all.checked = type.type
}完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.main {
margin: 100px auto;
width: 500px;
height: 300px;
border: 1px solid orange;
border-radius: 10px;
background-color: orange;
overflow: hidden;
}
.all {
width: 100px;
height: 100px;
line-height: 100px;
}
ul {
border-top: 1px solid rgb(221, 208, 208);
display: flex;
height: 50px;
line-height: 50px;
background-color: antiquewhite;
}
ul li:nth-of-type(1) {
width: 100px;
}
ul li:nth-of-type(2) {
width: 300px;
}
</style>
</head>
<body>
<div class="main">
<div class="all">
全选 <input type="checkbox" class="allSelected">
</div>
<ul>
<li><input type="checkbox" class="son" id="one"></li>
<li>中分头</li>
</ul>
<ul>
<li><input type="checkbox" class="son" id="two"></li>
<li>背带裤</li>
</ul>
<ul>
<li><input type="checkbox" class="son" id="three"></li>
<li>篮球</li>
</ul>
<ul>
<li><input type="checkbox" class="son" id="four"></li>
<li>我是ikun你记住</li>
</ul>
</div>
<script>
var all = document.getElementsByClassName("allSelected")[0];
var son = document.getElementsByClassName("son");
all.onclick = function () {
for (var i = 0; i < son.length; i++) {
son[i].checked = this.checked
var obj = {
"type": son[i].checked
}
var obj = JSON.stringify(obj)
localStorage.setItem(son[i].id, obj)
}
var obj = {
"type": this.checked
}
var obj = JSON.stringify(obj)
localStorage.setItem(this.className, obj)
}
function isAll() {
var flag = true;
for (var i = 0; i < son.length; i++) {
if (son[i].checked == false) {
return flag = false;
}
}
return flag
}
for (var i = 0; i < son.length; i++) {
(function (i) {
son[i].onclick = function () {
all.checked = isAll()
var obj = {
"type": this.checked
}
var obj = JSON.stringify(obj)
localStorage.setItem(this.id, obj)
}
})(i)
}
window.onstorage = function () {
for (var i = 0; i < son.length; i++) {
var type = localStorage.getItem(son[i].id)
type = JSON.parse(type)
son[i].checked = type.type
}
var type = localStorage.getItem(all.className)
type = JSON.parse(type)
all.checked = type.type
}
</script>
</body>
</html>
425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
