Question

我正在尝试为我的某个网站使用主题，其中用户可以动态选择主题颜色。存储主题颜色后，它必须保留颜色值，并且还必须在其他页面中更新。但是，我的其他页面中的颜色没有更新

<body>
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Theme <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">red</a></li>
    <li><a href="#">green</a></li>
    <li><a href="#">blue</a></li>
  </ul>
</div>
<a href="local-storage.html">next page</a>
</body>

和我的JQUERY代码是：

$(document).ready(function(){
$(document).on('click', '.dropdown-menu li a', function () {
    var color=($(this).text());
    if(color == "red"){
    $('body').css("background-color","red");
    }
    else
    if(color == "green"){
    $('body').css("background-color","green");
    }
    else
    if(color == "blue"){
    $('body').css("background-color","blue");
    }
    localStorage.setItem("value", color);
});


var name = localStorage.getItem("value");
$('body').css("background-color","name");
});

Answer 1

请在使用变量名称时删除撇号：

var name = localStorage.getItem("value");
$('body').css("background-color",name);

Answer 2

你错过了

var name = localStorage.getItem("value");
$('body').css("background-color", name);

Working Demo

本地存储未按预期工作

2 个答案: