<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>qdabc.cn</title> <style> *{ margin: 0; padding: 0; } body{ background-color: #000; } ul{ width: 500px; margin: 100px auto; } li{ list-style: none; float: left; width: 50px; height: 50px; border: 5px solid #fff; border-radius: 50%; margin: 0 10px; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> <script> var colors=['red','green','orange','lightblue','blue']; var lis=document.querySelectorAll('li'); for(var i=0;i<lis.length;i++){ lis[i].style.background=colors[i]; lis[i].index=i; lis[i].onclick=function(){ document.body.style.background=colors[this.index]; /*将当前的颜色存储起来*/ localStorage.setItem('bgc',colors[this.index]); } /*当页面打开时,颜色是之前关闭前设置的颜色*/ window.onload=function(){ document.body.style.background=localStorage.getItem('bgc'); } } </script> </html>
欢迎分享本文,转载请保留出处:前端ABC » localStorage网页换肤