在页面刷新时使用JavaScript保存复选标记

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

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

来源

2017-03-01 bemon

后整个代码（： –

你可以用'localStorage'保存复选框的值（假设浏览器允许）请发表您的所有代码，所以我们可以看到 – freginold

我已经发布了所有的代码，我找不到保存复选框信息的起点。我是否需要创建一个新的函数，还是我想要添加到已有的东西中？ – bemon

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

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

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

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

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 = ""; 
 
}

来源

2017-03-01 23:06:23

谢谢你今天的所有帮助。你今天对我的JavaScript学习很有帮助。不用担心'延迟'，我非常感谢你的帮助。 – bemon

你可能想饼干（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?

来源

2017-03-01 20:41:32

-1

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

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

来源

2017-03-01 20:42:56 Oscar

-1

例如，您应该使任务成为属性为text和done的对象。然后当你恢复你应该设置checked属性的复选框取决于done属性的值。

if (task.done) { 
    checkbox.checked = 'checked'; 
}

来源

2017-03-01 20:52:23

在页面刷新时使用JavaScript保存复选标记

回答

相关问题