Javascript 根据本地存储更改元素样式

我创建了一个切换输入，员工可以在这里设置他们是在办公室还是在办公室之外。我正在使用本地存储来保存输入的状态。当我在页面上添加多个切换输入时，每个输入的状态都可以更改，但当我重新加载页面时，由于在最后一个输入上设置了本地存储（即全部输出），所有输入都是相同的

如何保存每个切换状态并使用本地存储来记住这一点

CSS代码

<style type="text/css">
    .toggle {
      -webkit-appearance: none;
      appearance: none;
      width: 150px;
      height: 60px;
      display: inline-block;
      position: relative;
      border-radius: 50px;
      overflow: hidden;
      outline: none;
      border: none;
      cursor: pointer;
      background-color: red;
      transition: background-color ease 0.3s;
    }

    .toggle:before {
      content: "in out";
      display: block;
      position: absolute;
      z-index: 2;
      width: 80px;
      height: 70px;
      top: -5px;
      left: -10px;
      background: #fff;
      border-radius: 50%;
      font: 30px/70px Helvetica;
      text-transform: uppercase;
      font-weight: bold;
      text-indent: -40px;
      word-spacing: 85px;
      color: #fff;
      text-shadow: -1px -1px rgba(0,0,0,0.15);
      white-space: nowrap;
      box-shadow: 0 1px 2px rgba(0,0,0,0.2);
      transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
    }

    .toggle:checked {
      background-color: #4CD964;
    }

    .toggle:checked:before {
      left: 75px;
    }

    .toggle.in {
        background-color: #4CD964;
    }

    .toggle.in:before {
        left: 75px;
    }

</style>

---

您需要在

复选框中添加标识符。每次
更改复选框时
覆盖
本地存储中的值
并在页面加载时检索。另外，使用
数组
将其保存在
本地存储中
，因为使用本机JS对象比使用逗号分隔的字符串更容易

见下文

HTML

<input name="chk1" class="toggle" type="checkbox" />
<input name="chk2" class="toggle" type="checkbox" />

在当前代码中，您使用单个
键
保存两个
值
。如果同时添加两个
值，这可能会起作用，但如果覆盖上一个值，则不起作用。
您的问题是因为您只保存了一个状态并将其应用于所有复选框。因此，最后应用的状态将在下一次加载页面时提供给all

要解决这个问题，使用数组更有意义。然后，您可以存储每个复选框的状态，并在下次加载页面时重新应用，如下所示：

var$toggles=$（'.toggle'）。打开（'click'，function（）{
var checkedStates=$toggles.map（函数（）{
返回此文件。已检查；
}).get（）；
setItem（'checkedStates'，JSON.stringify（checkedStates））；
$（this.toggleClass（'in'）；
})
if（localStorage.getItem（'checkedStates'））{
parse（localStorage.getItem（'checkedStates'））.forEach（function（checked，i）{
$（'.toggle'）.eq（i）.prop（'checked'，checked.）.toggleClass（'in'，checked）
});
}

.toggle{
-webkit外观：无；
外观：无；
宽度：150px；
高度：60px；
显示：内联块；
位置：相对位置；
边界半径：50px；
溢出：隐藏；
大纲：无；
边界：无；
光标：指针；
背景色：红色；
过渡：背景色0.3s；
}
.切换：之前{
内容：“输入输出”；
显示：块；
位置：绝对位置；
z指数：2；
宽度：80px；
高度：70像素；
顶部：-5px；
左：-10px；
背景：#fff；
边界半径：50%；
字体：30px/70px Helvetica；
文本转换：大写；
字体大小：粗体；
文本缩进：-40px；
字距：85px；
颜色：#fff；
文本阴影：-1px-1px rgba（0,0,0,0.15）；
空白：nowrap；
盒影：0 1px2pRGBA（0,0,0,0.2）；
过渡：全立方贝塞尔（0.3,1.5,0.7,1）0.3s；
}
.切换：选中{
背景色：#4CD964；
}
.切换：选中：之前{
左：75px；
}
.in{
背景色：#4CD964；
}
.toggle.in:之前{
左：75px；
}



由于SO对代码段中的localStorage的访问进行了限制，请参阅此提琴以了解一个工作示例：

您总是覆盖本地存储中的相同位置（
result
）。您需要将它们单独保存或作为字符串化对象/数组保存。为了获得最佳结果，请为每个输入使用
ID
，并为对象中的每个输入传递本地存储值。最好使用
ID
而不是输入的名称作为标识符，这也是一个很好的标识符。但我想，OP可以与其他选择一起工作。：）在某些情况下，您可能在两个或多个输入中使用相同的名称，对我来说，使用输入
id
是执行类似操作的最佳方式。我想这就是为什么
id
被添加为HTML属性的原因。我已经同意你的观点。我的观点是OP可以判断
name
是否足够，或者代码是否需要更改以使用
id
：）是的，你是对的，这由OP决定。如果这是传递用户
标识符的用户相关信息，例如
localStorage
对象中的全名，也可以是另一种方法。例如
。。。{“johnDoe”：“in”}…
。
var toggle = $('.toggle');
toggle.on('click', function(){
    if ( $('input[type=checkbox]:checked').length === 0 ) {
        localStorage.setItem('result', 'out');
        $(this).removeClass('in');  
    } else {
        localStorage.setItem('result', 'in');
        $(this).addClass('in');
    }
})

if ( localStorage.result === 'in' ) {
    toggle.addClass('in');
} else {
    toggle.removeClass('in');
}

<input name="chk1" class="toggle" type="checkbox" />
<input name="chk2" class="toggle" type="checkbox" />

var toggle = $('.toggle');

function updateStorage() {
  var storage = [];
  toggle.each(function() {
    storage.push({
      name: $(this).attr('name'),
      checked: $(this).prop('checked'),
    })
  });
  localStorage.setItem('prefix-result', JSON.stringify(storage));
}

function loadStorage() {
  var storage = localStorage.getItem('prefix-result');
  storage = storage ? JSON.parse(storage) : [];
  storage.forEach(function (item) {
    $('input[name=' + item.name + ']').prop('checked', item.checked)
  })
}

loadStorage();
toggle.on('change', updateStorage);