javascript - 如何为颜色切换器添加 localStorage

Question

下面的示例在我的网站上运行良好。我想使用 localStorage 保存颜色切换器操作。

注意:问题不在于脚本。我需要更改颜色主题，在重新加载页面后也会保持相同的颜色。

我不知道如何实现它。哪位帮忙解决下。

提前致谢。

Reference color theme link

$('#color-wrapper ul li, #color-wrapper p').click(function(){
  var color_scheme = $(this).attr('data-path');
  $('#color-switcher').attr('href',color_scheme);
});

#color-wrapper { width: 180px; margin: 0 auto; padding-top: 5px; }
#color-wrapper h2 { margin: 5px 0 5px; font-size: 15px; font-weight: bold; color: #000; }
#color-wrapper ul { margin: 0; padding: 0; }
#color-wrapper ul li { float: left; width: 26px; height: 26px; margin: 5px 10px 5px 0px;cursor: pointer;list-style: none; }
#color-wrapper ul li.thunder { background: #3a3138; }
#color-wrapper ul li.green { background: #2ecc71; }
#color-wrapper p { font-size: 14px; padding-top: 10px; color: #999; cursor: pointer; clear: both;}
#color-wrapper p:hover { color: #000; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.dropbox.com/s/f1qauyj5k7w3asn/default.css?dl=0" id="color-switcher">

<div id="demo-colors" class="demo-colors">
     <div id="color-wrapper">          
          <h2>COLORS:</h2>          
          <ul>
              <li class="thunder" data-path="https://www.dropbox.com/s/stf3xvmxqm738lj/thunder.css?dl=0"></li>
              <li class="green" data-path="https://www.dropbox.com/s/f1qauyj5k7w3asn/default.css?dl=0"></li>
          </ul>
          <div class="clear"></div>   
          <p data-path="https://www.dropbox.com/s/f1qauyj5k7w3asn/default.css?dl=0">Restore Default</p>

     </div>
</div>

Answer 1

首先将配色方案设置为本地存储项

$('#color-wrapper ul li, #color-wrapper p').click(function(){
   var color_scheme = $(this).attr('data-path');
   $('#color-switcher').attr('href',color_scheme);
   localStorage.setItem('color_scheme', color_scheme);
});

当页面加载时，检查一个元素是否以前保存过，如果是，则获取 localStorage 元素并更新 href

$(document).ready(function() {
    var saved_color_scheme = localStorage.getItem('color_scheme');
    if(saved_color_scheme) {
       $('#color-switcher').attr('href', saved_color_scheme);
    }
});