如何为颜色切换器添加 localStorage答案

【问题标题】：How to add localStorage for color switcher如何为颜色切换器添加 localStorage
【发布时间】：2020-01-02 06:35:08
【问题描述】：

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

注意：脚本没有问题。我需要更改颜色主题在重新加载页面后也将保持相同的颜色。

我不知道如何实现它。任何人都可以帮助解决。

提前致谢。

$('#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>

【问题讨论】：

documentation for localStorage 应该允许您编写一些实际使用 localStorage 的代码
您能否详细说明您需要实现的目标？ '颜色切换器操作'是什么意思？
wahabali.com/work/pearl-demo/index-hotel.html#。您检查此示例网站右侧更改网站的颜色主题。喜欢这种类型我想要
问题不清楚！！！无法理解。请描述您面临的实际问题，并请让我们知道您的代码 sn-p 正在做什么，我调试此代码 sn-p 并且它不起作用！！！

标签： javascript jquery html css colors

【解决方案1】：

你只使用localStorage.setItem('color', 'value-in-string');

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

当您需要颜色时，您可以从 localStorage localStorage.getItem('color_scheme')

【讨论】：

你还需要写一个函数从localstorage获取值并改变样式表

【解决方案2】：

您可以动态添加样式文件，为此您可以将文件附加到 head 标签中

$('#color-wrapper ul li, #color-wrapper p').click(function(){
    var color_scheme = $(this).attr('data-path');
    $('head').append('<link rel="stylesheet" href="' + color_scheme + '" type="text/css" />')
  $('#color-switcher').attr('href',color_scheme);
});

【讨论】：

脚本不存在问题。我需要在重新加载页面后更改颜色主题也将保留。

【解决方案3】：

首先将配色方案设置为 localStorage 项

$('#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);
    }
});

【讨论】：

【解决方案4】：

首先你保存在 localStorage

localStorage.setItem('color_scheme', color_scheme);

在函数 ready 上使用 jquery 你会得到值（如果不存在将返回 null）

$( document ).ready(function() {
    if(localStorage.getItem('color_scheme'))
        $('head').append('<link rel="stylesheet" href="' + color_scheme + '" type="text/css" />')
});

【讨论】：