javascript - 重新加载时 HTML5 本地存储不起作用

Question

总而言之，我有一排复选框，我试图拥有它，以便当单击一个复选框时，选项会保存并保留在浏览器重新加载时。

我将数组输出到本地存储中，但是它没有保存，这是到目前为止的代码:

<section class="column">
  <label><input type="checkbox" name="BBCNews" class="checked" v-model="isBBCNews"><span>BBC News</span></label>
  <label><input type="checkbox" name="BBCSport" class="checked" v-model="isBBCSport"><span>BBC Sport</span></label>
  <label><input type="checkbox" name="TheTelegraph" class="checked" v-model="isTheTelegraph"><span>The Telegraph</span></label>
  <label><input type="checkbox" name="TheIndependent" class="checked" v-model="isTheIndependent"><span>The Independent</span></label>
</section>

<section class="column">
  <label><input type="checkbox" name="LadBible" class="checked" v-model="isLadBible"><span>Lad Bible</span></label>
  <label><input type="checkbox" name="HackerNews" class="checked" v-model="isHackerNews"><span>Hacker News</span></label>
  <label><input type="checkbox" name="Reddit" class="checked" v-model="isReddit"><span>Reddit</span></label>
  <label><input type="checkbox" name="ProductHunt" class="checked" v-model="isProductHunt"><span>Product Hunt</span></label>
</section>

这是当前的 JavaScript 代码

// Store services to local
  var enabledServices = JSON.parse(localStorage.getItem('enabledServices')) || {},

  $checkboxes = $("input[type='checkbox']");
  $checkboxes.on("change", function(){
    $checkboxes.each(function(){
      enabledServices[this.name] = this.checked;
    });

    localStorage.setItem("enabledServices", JSON.stringify(enabledServices));
  });

  // On page load
  $.each(enabledServices, function(key, value) {
    $("#" + key).prop('checked', value);
  });

这是本地存储中显示的数组 screenshot

我希望该选项完全消失，但一个简单的 false 就可以了，目前当我刷新所有复选框时会返回到当前状态。

感谢任何帮助。

编辑

通过使用 Vue 的 Vue Persist 包 https://www.npmjs.com/package/vue-persist我实现了我所需要的。

Answer 1

从您的代码中没有为复选框分配id，因此以下操作将失败:

$("#" + key).prop('checked', value);

您要写入 localstorage key 的是名称。更改为以下内容以按名称获取复选框并更新 checked 属性。

 $("[name='" + key + "']").prop('checked', value);

// Store services to local
var enabledServices = JSON.parse(localStorage.getItem('enabledServices')) || {},

$checkboxes = $("input[type='checkbox']");
$checkboxes.on("change", function () {
	$checkboxes.each(function () {
		enabledServices[this.name] = this.checked;
	});

	localStorage.setItem("enabledServices", JSON.stringify(enabledServices));
});

// On page load
$.each(enabledServices, function (key, value) {
	$("[name='" + key + "']").prop('checked', value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<section class="column">
	<label><input type="checkbox" name="BBCNews" class="checked" v-model="isBBCNews"><span>BBC News</span></label>
	<label><input type="checkbox" name="BBCSport" class="checked" v-model="isBBCSport"><span>BBC Sport</span></label>
	<label><input type="checkbox" name="TheTelegraph" class="checked" v-model="isTheTelegraph"><span>The Telegraph</span></label>
	<label><input type="checkbox" name="TheIndependent" class="checked" v-model="isTheIndependent"><span>The Independent</span></label>
</section>

<section class="column">
	<label><input type="checkbox" name="LadBible" class="checked" v-model="isLadBible"><span>Lad Bible</span></label>
	<label><input type="checkbox" name="HackerNews" class="checked" v-model="isHackerNews"><span>Hacker News</span></label>
	<label><input type="checkbox" name="Reddit" class="checked" v-model="isReddit"><span>Reddit</span></label>
	<label><input type="checkbox" name="ProductHunt" class="checked" v-model="isProductHunt"><span>Product Hunt</span></label>
</section>