本地存储未按预期工作

Question

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

<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

本地存储未按预期工作

Local Storage is not working as expected

html

javascript

jquery

themes

local-storage