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

Question

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

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

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>

HTML代码

<input class="toggle" type="checkbox" />
<input class="toggle" type="checkbox" />

JQUERY CODE

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

Answer 1

您的问题是因为您只保存单个状态并将其应用于所有复选框。因此，最后应用的状态将在下一次加载页面时给予所有状态。

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

var $toggles = $('.toggle').on('click', function() {
  var checkedStates = $toggles.map(function() {
    return this.checked;
  }).get();
  localStorage.setItem('checkedStates', JSON.stringify(checkedStates));
  $(this).toggleClass('in');
})

if (localStorage.getItem('checkedStates')) {
  JSON.parse(localStorage.getItem('checkedStates')).forEach(function(checked, i) {
    $('.toggle').eq(i).prop('checked', checked).toggleClass('in', checked)
  });
}

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input class="toggle" type="checkbox" />
<input class="toggle" type="checkbox" />

由于SO限制了对代码段中localStorage的访问，请查看此小提琴以获取一个工作示例：

Example Fiddle

Answer 2

你需要为你的checkboxes添加一个标识符。每次复选框都是changed覆盖localStorage中的值并在页面加载时检索。另外，使用array将其保存在localStorage中，因为使用本机JS对象而不是逗号分隔的字符串会更容易。

见下文

HTML

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

JavaScript的

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);

在您当前的代码中，您使用单个key来保存values。如果你添加两个values可能会有效，但如果你覆盖前一个，它将无法工作。