在頁面刷新時使用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保存複選標記

回答

相關問題