localstorage刷新背景页面不变色
程序员文章站
2022-03-03 21:54:07
...
<!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>