有些网站为了增加用户体验通常会给网站设置换肤功能
这里会遇到一个问题，当设置颜色后刷新时就会还原到原来的颜色
可以用localStorage解决刷新问题
下面是个小案例
<!DOCTYPE html>
<html>
<head>
<title>uibobob.com</title>
</head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<style type="text/css">
nav{
height:50px;
width:100%;
background: black;
}
</style>
<body style="margin:0">
<nav id="nav"></nav>
<div style="margin-top:100px;">
<button id="red">点我，变红</button>
<button id="green">点我，变绿</button>
</div>
<script type="text/javascript">
//设置红色
$('#red').click(function(){
//设置nav颜色
$('#nav').css('backgroundColor','red');
//获取当前颜色
var temp=$('#nav').css('backgroundColor');
//存储当前颜色
localStorage.setItem("temp",temp);
});
//设置绿色
$('#green').click(function(){
$('#nav').css('backgroundColor','green');
var temp=$('#nav').css('backgroundColor');
localStorage.setItem("temp",temp);
});
//读取本地的颜色
$(document).ready(function () {
//获取本地存储的颜色然后设置
var temp = localStorage.getItem("temp");
$('#nav').css('backgroundColor',temp);
});
</script>
</body>
</html>
Q.E.D.