有些网站为了增加用户体验通常会给网站设置换肤功能

这里会遇到一个问题,当设置颜色后刷新时就会还原到原来的颜色

可以用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>
Last modification:February 28th, 2019 at 06:53 pm
如果觉得我的文章对你有用,请随意赞赏