为啥读取 localStorage 值需要刷新页面才能显示由 jQuery 切换的 CSS 更改？

Posted 2023-03-05

【中文标题】为啥读取 localStorage 值需要刷新页面才能显示由 jQuery 切换的 CSS 更改？

【英文标题】：Why does reading localStorage values require a page refresh to show CSS changes toggled by jQuery?为什么读取 localStorage 值需要刷新页面才能显示由 jQuery 切换的 CSS 更改？

【发布时间】：2021-01-29 08:58:45

【问题描述】：

我正在尝试使用 localStorage 的值来显示两个 Twitter 提要之一，一个用于浅色模式主题，另一个用于深色模式。它可以工作，但我必须刷新网页以获取正确的 CSS - twitter-dark-display-none 或 twitter-light-display-none - 才能工作。

使用jQuery(document).ready(function () 没有帮助。

小提琴：https://jsfiddle.net/zpsf5q3x/2/ 但是由于 JSFiddle 对显示第三方框架的限制，示例推文不会显示。而且，localstorage 也可能无法在那里工作。

Fiddle 调用两个外部库： https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css 和 https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js

html：

注意第一块中的data-theme="dark"。

<div class="twitter-dark-display-none">
<a class="twitter-timeline" data- data- data-theme="dark"
 data-tweet-limit="1" data-chrome="transparent nofooter noborders" href="https://twitter.com/***?ref_src=twsrc%5Etfw">Tweets</a>
</div>

<div class="twitter-light-display-none">
<a class="twitter-timeline" data- data- data-tweet-limit="1" data-chrome="transparent nofooter noborders" href="https://twitter.com/***?ref_src=twsrc%5Etfw">Tweets</a>
</div>

jQuery:

使用 localStorage 在暗模式和正常模式之间切换整个站点的整体功能。

$('body').toggleClass(localStorage.toggled);
function darkLight() 
  if (localStorage.toggled != 'dark') 
    $('body').toggleClass('dark', true);
    localStorage.toggled = "dark";
   else 
    $('body').toggleClass('dark', false);
    localStorage.toggled = "";
  

我试图用什么来切换 CSS：

  if (localStorage.toggled === 'dark') 
    
        $('.twitter-light-display-none').addClass("display-none");
        $('.twitter-dark-display-none').addClass("display-block");
    
       else 
    
        $('.twitter-dark-display-none').addClass("display-none");
        $('.twitter-light-display-none').addClass("display-block");
    
    

CSS：

.display-none 
    display: none !important;


.display-block 
    display: block !important;

---

2020 年 10 月 24 日编辑：

johannchopin's 答案有效，加上$('body').toggleClass(localStorage.toggled); 就像我上面的原始代码一样。

但是。与 gitbrent 暗模式 JS 和 CSS 库存在某种冲突，因此我切换到 https://github.com/coliff/dark-mode-switch，这导致除了提供给在 twitter 小部件 div 之间切换：

<script>

(function() 
  var darkSwitch = document.getElementById("darkSwitch");
  if (darkSwitch) 
    initTheme();
    darkSwitch.addEventListener("change", function(event) 
      resetTheme();
    );
    function initTheme() 
      var darkThemeSelected =
        localStorage.getItem("darkSwitch") !== null &&
        localStorage.getItem("darkSwitch") === "dark";
      darkSwitch.checked = darkThemeSelected;
      darkThemeSelected
        ? document.body.setAttribute("data-theme", "dark")
        : document.body.removeAttribute("data-theme");
    
    function resetTheme() 
      if (darkSwitch.checked) 
        document.body.setAttribute("data-theme", "dark");
        localStorage.setItem("darkSwitch", "dark"); 
 else 
        document.body.removeAttribute("data-theme");
        localStorage.removeItem("darkSwitch");  
      
  updatedarkSwitch();
    
  
)();

function updatedarkSwitch() 
  if (localStorage.darkSwitch === 'dark') 
    $('.twitter-light-display-none').addClass("display-none").removeClass('display-block');
    $('.twitter-dark-display-none').addClass("display-block").removeClass('display-none');
   else 
    $('.twitter-dark-display-none').addClass("display-none").removeClass('display-block');
    $('.twitter-light-display-none').addClass("display-block").removeClass('display-none');
  

updatedarkSwitch()
</script>

然后在样式表中使用最基本的暗模式规则：

[data-theme="dark"] 
background-color: #000000 !important;


and also add any other more specific CSS rules needed, i.e.

[data-theme="dark"] .post-title
color:#fff !important;

【问题讨论】：

请在您的 jsfiddle 中添加重现问题所需的所有代码。我们需要查看行为+代码才能提供帮助

所有代码都在那里；由于 JSFiddle 对显示第三方框架的限制，推文不会显示。而且，本地存储也可能无法在那里工作。

再次检查你的 jsfiddle。您的 javascript 没有连接到按钮。你所拥有的只有一个 if/else 语句。你的事件监听器在哪里？

【参考方案1】：

你应该使用getItem()方法。

let x = localStorage.getItem('toggled');

然后检查一个变量。

---

https://developer.mozilla.org/ru/docs/Web/API/Storage/getItem

【讨论】：

Web Storage API allows for getting and setting of storage items using the dot or bracket syntax (see Basic Concepts)

【参考方案2】：

您的代码中有多个问题。首先，您切换 CSS，但仅在页面加载时切换，因为此代码仅运行一次（加载脚本时）：

if (localStorage.toggled === 'dark') 
  // ...

只需将此脚本移动到您在darkLight() 末尾调用的函数中（例如：updateInterfaceTheme）。

另一个问题是您忘记清理之前的类，这会导致样式冲突：

$('.twitter-light-display-none').addClass("display-none"); // class .display-block still exist
$('.twitter-dark-display-none').addClass("display-block"); // class .display-none still exist

所以别忘了清理它们：

 if (localStorage.toggled === 'dark') 
    $('.twitter-light-display-none').addClass("display-none").removeClass('display-block');
    $('.twitter-dark-display-none').addClass("display-block").removeClass('display-none');
   else 
    $('.twitter-dark-display-none').addClass("display-none").removeClass('display-block');
    $('.twitter-light-display-none').addClass("display-block").removeClass('display-none');
  

而且它正在工作：

function darkLight() 
  if (localStorage.toggled !== 'dark') 
    $('body').toggleClass('dark', true);
    localStorage.toggled = "dark";
   else 
    $('body').toggleClass('dark', false);
    localStorage.toggled = "";
  

  updateInterfaceTheme();


function updateInterfaceTheme() 
  if (localStorage.toggled === 'dark') 
    $('.twitter-light-display-none').addClass("display-none").removeClass('display-block');
    $('.twitter-dark-display-none').addClass("display-block").removeClass('display-none');
   else 
    $('.twitter-dark-display-none').addClass("display-none").removeClass('display-block');
    $('.twitter-light-display-none').addClass("display-block").removeClass('display-none');
  


updateInterfaceTheme()

.display-none 
  display: none !important;


.display-block 
  display: block !important;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="switch"><span class="switchtext">Dark</span>
  <input type="checkbox" data-style="ios" data-onstyle="outline-secondary" data-offstyle="outline-secondary" data-size="sm" data-toggle="toggle" onchange="darkLight()">
  <span class="slider"></span><span class="switchtext">Mode</span>
</label>

<div class="twitter-dark-display-none">Dark Mode
  <a class="twitter-timeline" data- data- data-theme="dark" data-tweet-limit="1" data-chrome="transparent nofooter noborders" href="https://twitter.com/***?ref_src=twsrc%5Etfw">Tweets</a>
</div>

<div class="twitter-light-display-none">Light Mode
  <a class="twitter-timeline" data- data- data-tweet-limit="1" data-chrome="transparent nofooter noborders" href="https://twitter.com/***?ref_src=twsrc%5Etfw">Tweets</a>
</div>

查看 jsfiddle 以查看它与 localStorage 的配合情况。

【讨论】：

谢谢！这是一个很好的尝试，但深色/浅色模式不会在页面重新加载或导航到其他页面时持续存在；重新加载页面会关闭暗/亮模式。

@BlueDogRanch 是的。切换到深色模式并刷新页面，您会看到只显示Dark Mode Tweets 文本。再次切换到灯光并刷新，您只会看到Light Mode Tweets 文本。如果您谈到复选框，您没有编写任何有关此复选框的代码。我应该将此功能添加到答案中吗？

我的问题中的原始代码正确地允许暗/亮模式在页面加载期间持续存在；那从来都不是问题。问题一直是强制 twitter div 上的 CSS 无需刷新页面正确显示。

dark/light mode gets toggled off with a page reload 是什么意思？检查jsfiddle，您会看到在页面重新加载时根据主题显示了正确的部分（因此它是持久的）：/我的代码中究竟缺少什么功能？仍然检查暗模式的复选框？

啊，一个问题是我的 Fiddle 中有两个包含的库：cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/… 和 cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/…。但是，我当然在我的本地主机中有这些，并且在页面加载过程中，暗/亮模式仍然不会持续存在。