Question

我可以保存复选标记框的值，这样当页面刷新时，如果之前检查过该框，它会相应显示吗？这是一个待办事项列表应用程序。我一直在寻找和阅读MDN文档试图找出解决方案，任何帮助将不胜感激。谢谢！

的JavaScript

var masterList = [];

window.onload = function(){
  masterList = JSON.parse(localStorage.getItem('masterList')); //get data from storage
  if (masterList !== null) { //if data exist (todos are in storage)
    masterList.forEach(function(task){ //append each element into the dom
      var entry = document.createElement('li'); //2
      var list = document.getElementById('orderedList'); //2
      var text = document.createTextNode(task);
      var checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.name = 'name';
        checkbox.value = 'value';
        checkbox.id = 'id';
        entry.appendChild(checkbox);
      document.getElementById('todoInput').appendChild(entry);
      list.appendChild(entry);
      entry.appendChild(text);
    })
  } else { //if nothing exist in storage, keep todos array empty
    masterList = [];
  }
}

function addToList(){

  var task = document.getElementById('todoInput').value;
  var entry = document.createElement('li'); //2
  var list = document.getElementById('orderedList'); //2
  var text = document.createTextNode(task);
  var checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.name = 'name';
    checkbox.value = 'value';
    checkbox.id = 'id';
    entry.appendChild(checkbox);
  document.getElementById('todoInput').appendChild(entry);
  list.appendChild(entry);
  entry.appendChild(text);

  masterList.push(task);

  localStorage.setItem('masterList', JSON.stringify(masterList));

  console.log(task);
  console.log(masterList);
  clearInput();
}

function clearInput() {
    todoInput.value = "";
}

console.log((localStorage.getItem('masterList')));

编辑 - 添加了其余代码 HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>

      <h1>To Do List:<h1>

        <input id="todoInput" type="text">
        <button type="button" onclick="addToList()">Add Item</button>
        <ol id='orderedList'></ol>

    <script src="todo.js"></script>

  </body>
</html>

CSS

ol li {
  background: lightgray;
  text-align: left;
}

ol li:nth-child(odd){
  background: lightblue;
  text-align: left
  text: 10%;
}

input[type=text]{
  width: 20%;
  border: 2px solid black;
  background-color: rgba(255, 0, 0, 0.2);
  text-align: center;
}

h1{
  text-align: center;
}

Answer 1

对不起延迟，但有点复杂。

如果你想知道我在这里做了什么 - 我已经改变了存储你的待办事项的方法。它曾经只是一个基本数组['one', 'two', 'three']。现在它是一个对象数组：

[{todo: 'one', isChecked: false}, {todo: 'one', isChecked: false}]。

如果选中指定复选框，则事件侦听器正在更改指定对象的isChecked键值（对应于单击的复选框），并将数据存储在本地存储中。

＆＃13;

var masterList = [];

window.onload = function() {
    masterList = JSON.parse(localStorage.getItem('masterList')); //get data from storage
    if (masterList !== null) { //if data exist (todos are in storage)
        masterList.map(function(task) { //append each element into the dom
            var entry = document.createElement('li'); //2
            var list = document.getElementById('orderedList'); //2
            var text = document.createTextNode(task.todo);
            var checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.name = 'name';
            checkbox.value = 'value';
            checkbox.id = 'id';
            checkbox.className = 'x';
            checkbox.checked = task.isCheckboxChecked;
            entry.appendChild(checkbox);
            document.getElementById('todoInput').appendChild(entry);
            list.appendChild(entry);
            entry.appendChild(text);
        })
    } else { //if nothing exist in storage, keep todos array empty
        masterList = [];
    }

    var checkboxes = document.getElementsByClassName('x');
    Array.from(checkboxes).forEach((v, i) => v.addEventListener('click', function() {
        masterList[i].isCheckboxChecked == false ? masterList[i].isCheckboxChecked = true : masterList[i].isCheckboxChecked = false;
        localStorage.setItem('masterList', JSON.stringify(masterList));
    }));

}

function addToList() {

    var task = document.getElementById('todoInput').value;
    var entry = document.createElement('li'); //2
    var list = document.getElementById('orderedList'); //2
    var text = document.createTextNode(task);
    var checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.name = 'name';
    checkbox.value = 'value';
    checkbox.id = 'id';
    checkbox.className = 'x';
    entry.appendChild(checkbox);
    document.getElementById('todoInput').appendChild(entry);
    list.appendChild(entry);
    entry.appendChild(text);
    var obj = {};
    obj.todo = task;
    obj.isCheckboxChecked = false;

    masterList.push(obj);

    localStorage.setItem('masterList', JSON.stringify(masterList));

    console.log(task);
    console.log(masterList);
    clearInput();
    var checkboxes = document.getElementsByClassName('x');
    console.log(Array.from(checkboxes))
    Array.from(checkboxes).forEach((v, i) => v.removeEventListener('click', function() {
        masterList[i].isCheckboxChecked == false ? masterList[i].isCheckboxChecked = true : masterList[i].isCheckboxChecked = false;
    }));
    Array.from(checkboxes).forEach((v, i) => v.addEventListener('click', function() {
        masterList[i].isCheckboxChecked == false ? masterList[i].isCheckboxChecked = true : masterList[i].isCheckboxChecked = false;
        localStorage.setItem('masterList', JSON.stringify(masterList));
    }));
}

function clearInput() {
    todoInput.value = "";
}

＆＃13;

Answer 2

您可能需要Cookie（document.cookie）。看看：
https://www.w3schools.com/js/js_cookies.asp
https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

但要小心。。。这很奇怪！
How exactly does document.cookie work?

Answer 3

您需要处理复选框的更改事件并自行保留数据，可能在localStorage中。它可以是具有复选框名称和已检查状态的键值对数组。

在表单加载回发后，获取数据并从之前保存的数据中恢复复选框的状态。

在页面刷新时保存JavaScript中的复选标记

3 个答案: