使用默认选中复选框的LocalStorage

Use LocalStorage with Checkbox Checked by Default

本文关键字：复选框 LocalStorage 默认      更新时间：2023-09-26

笔：http://codepen.io/anon/pen/YWaJaP?editors=0010
小提琴：https://jsfiddle.net/qnLhtzss/

默认情况下，我希望复选框被选中，但如果用户更改了它，我希望它保存为用户保存的内容。

当用户点击链接时，它会保存状态，但默认情况下，当它被认为是时，复选框不会被选中。

有人能解释一下为什么不起作用吗？

HTML:

<input type="checkbox" id="changePrev" checked>
<label for="changePrev">Auto Update Preview</label>

JavaScript:

// Toggle Auto Update Preview
var checkedPrev = JSON.parse(localStorage.getItem("autoUpdate"));
var changePrev = document.getElementById("changePrev");
changePrev.checked = checkedPrev;
$("#changePrev").on("change", function() {
  (this.checked) ? localStorage.setItem("autoUpdate", "true") : localStorage.setItem("autoUpdate", "false");
}).trigger("change");

问题是第一次使用导航到页面

var checkedPrev = JSON.parse(localStorage.getItem("autoUpdate"));

将是null，因为LocalStorage中不存在"autoUpdate"密钥。这随后将changePrev.checked = checkedPrev设置为null，并最终导致复选框未选中。

您可以通过对checkedPrev进行简单的null检查来解决此问题，如果是null，则默认为true。

// Toggle Auto Update Preview
var checkedPrev = JSON.parse(localStorage.getItem("autoUpdate"));
// If checkedPrev === null then the use has never been here before.
// Make checkedPrev default to true
checkedPrev = checkedPrev === null ? true : false;
var changePrev = document.getElementById("changePrev");
changePrev.checked = checkedPrev;
$("#changePrev").on("change", function() {
  (this.checked) ? localStorage.setItem("autoUpdate", "true") : localStorage.setItem("autoUpdate", "false");
}).trigger("change");
相关文章：