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

中的数组

我希望选项完全消失，但是一个简单的错误就行了，目前当我刷新所有复选框时会回到当前状态。

感谢任何帮助。

修改

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

Answer 1

从您的代码中没有id分配给复选框，因此以下内容将失败：

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

重装时HTML5本地存储无法正常工作

1 个答案: