localstorage刷新背景页面不变色
程序员文章站
2022-03-13 13:55:34
...
<!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>
</head>
<style>
ul {
width: 500px;
height: 150px;
margin: 100px auto;
display: block;
}
li {
list-style: none;
float: left;
padding: 15px;
border: 1px solid #ccc;
margin-left: 20px;
cursor: pointer;
border-radius: 5px;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
h2{
margin-top: 100px;
text-align: center;
}
</style>
<body>
<h2>使用localstorage刷新页面背景不变色</h2>
<ul >
<li>更换红色背景</li>
<li>更换黄色背景</li>
<li>更换绿色背景</li>
</ul>
<script>
let arr = ["red", "yellow", "green"];
let ul = document.querySelector("ul");
let lis = ul.querySelectorAll("li");
for (let i = 0; i < lis.length; i++) {
lis[0].onclick = function () {
document.body.style.backgroundColor = arr[0];
window.localStorage.setItem("bgcolor", arr[0]);
};
lis[1].onclick = function () {
document.body.style.backgroundColor = arr[1];
window.localStorage.setItem("bgcolor", arr[1]);
};
lis[2].onclick = function () {
document.body.style.backgroundColor = arr[2];
window.localStorage.setItem("bgcolor", arr[2]);
};
}
window.onload =function(){
document.body.style.backgroundColor = localStorage.getItem('bgcolor')
}
</script>
</body>
</html>