时间戳

首页 > 解决方案 > 带有复选框的 Javascript localStorage 联系人

javascript - 带有复选框的 Javascript localStorage 联系人

问题描述

我有一个设置面板，上面有一个复选框，负责关闭自动主题更改。第一个问题是该复选框不允许更改（我看到触发了一个功能）。第二个问题是我希望在每次重新加载时返回值（真或假）并设置为复选框。如何解决这个问题？

     TimeSch(localStorage.getItem("'TimeSch'"));
        function TimeSch(a) {
            if (a) {
                document.getElementById('TimeSch').checked = 'true';
                console.log('True start');
                Set('TimeSch', true);
                $('#theme').prop('disabled', true);
                const hours = new Date().getHours();
                const isDayTime = hours > 6 && hours < 20;
                if (isDayTime) {
                    theme('White');
                    console.log('Auto White');
                } else {
                    theme('Dark');
                    console.log('Auto Dark');
                }
            } else {
                 document.getElementById('TimeSch').checked = 'false';
                    console.log('False start');
                $('#theme').prop('disabled', false);
                Set('TimeSch', false);
            }
        }
  function Set(name, value) {
        if (typeof Storage !== "undefined") {
            localStorage.setItem("'" + name + "'", value);
        } else {
            console.log('No localStorage supported. Oh, please chage your browser!');
        }
    }

https://codepen.io/abooo/pen/PVQaWB

标签： javascriptlocal-storage

解决方案

您的代码段存在多个问题：

  • theme()该功能没有实现
  • input[type="checkbox"]在select元素内部，这是无效标记，它们同时被启用/禁用
  • css forinput[type=checkbox]:after不考虑复选框的状态，所以它总是只显示x
  • 设置不需要的元素的属性jQuery
  • 通过JS检查复选框，你应该给它Boolean，而不是字符串
  • 你为什么要这样做：localStorage.setItem("'" + name + "'", ...？考虑使用：localStorage.setItem(name, ...直接

目前尚不清楚您要达到的总体目标，但我做了一些补丁，至少它变得有些活跃：https ://codepen.io/anon/pen/OdQEvr

推荐阅读