本地存储不适合记住类别切换的最后一个用户输入 [英] Local storage not applying to remember the last user input for the class toggle

问题描述

已保存本地存储值，但如何使用已保存的本地存储.我尝试创建一个函数apply但该类不适用

Local storage value saved but how to use the saved local storage used. I tried creating a function apply but the class is not applying

document.querySelectorAll("#abc, #xyz").forEach(btn => {  
    btn.addEventListener("click", () => {
        const e = document.querySelectorAll(".dog,.cat, #abc, #xyz");
        e.forEach(el => {
            el.classList.toggle("red");
var xyz = document.getElementById("xyz").className;
localStorage.setItem("vovo", xyz);
        });   
    }); 
})

function apply(){
 var xy = localStorage.getItem('vovo');
 if (xy) {
    var single = document.querySelectorAll(".dog,.cat, #abc, #xyz");
    single.forEach(el => {
        el.classList.add(xy);
        });  
 }
};

推荐答案

功能逻辑:

• 当按下button时，我们将检查其是否具有red类(因为所有元素button s和其他div s都将在某个时候收到red类).
  • 如果具有该类，则将其切换(将从所有button和其他div中删除)，因此localStorage将存储类似的内容.没有红色的班级"..
  • 如果没有它，它将被切换(它将被添加到所有button和其他div s中)，因此localStorage将存储类似的内容.元素具有红色类别"..
  • 基本上，如果未应用该类，则localStorage将存储'0'；如果应用该类，则将存储'1'.
  • when a button is pressed we check if it has the red class (as all the elements, buttons and the other divs, will receive the red class at some point).
    • if it has that class then it will be toggled (it will be removed from all the buttons and the other divs) thus the localStorage will store something like "No the elements don't have the red class".
    • if it doesn't has it the it will be toggled (it will be added to all the buttons and the other divs) thus the localStorage will store something like "Yes the elements have the red class".
    • basically, the localStorage will store '0' if the class isn't applied, '1' if the class is applied.

    现在，当刷新页面时，我们检查存储red类状态的localStorage项目是否存在(不是null)并且值为'1'，然后应用该值所有元素(button和其他div s)的类.

    now, when the page gets refreshed, we check if the localStorage item that stores the red class' state is there (not null) and has the value of '1' then apply that class to all the elements (the buttons and the other divs).

    从localStorage中删除保持red类状态的项目.

    remove the item that holds the red class' state from the localStorage.

    这是更新的JavaScript代码:

    对不起大家，因为我无法使用SO的片段进行实时演示，因为由于代码被沙箱化，所以无法访问localStorage.

    无论如何，这是一个 CodePen 演示，它说明了所需的功能.

    Anyway, here's a CodePen demo illustrating the required functionality.

    const els = document.querySelectorAll('.dog,.cat, #abc, #xyz');
    
    /** when the page finishes loading **/
    document.addEventListener('DOMContentLoaded', () => {
        /** check if the 'red' class was applied **/
        applied = window.localStorage.getItem('class-applied') === '0' ? false:true;
      /** remove "class-applied" item from the localStorage **/
      window.localStorage.removeItem('class-applied');
      /** if the "red" class was applied just apply it on document load **/
      applied && els.forEach(el => el.classList.add('red'));
    });
    
    els.forEach(btn => {
      btn.addEventListener('click', () => {
        /** store the "red" class' state : '1' means it is applied, '0' means it isn't apllied **/
        window.localStorage.setItem(
          'class-applied',
          !btn.classList.contains('red') ? '1' : '0'
        );
        els.forEach(el => el.classList.toggle('red'));
      });
    });
    

    以上代码应放在</body>之前.

    这篇关于本地存储不适合记住类别切换的最后一个用户输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！