在頁面加載/在OL中刷新時顯示本地存儲

我一直在嘗試創建待辦事項列表並繼續遇到不同的問題。現在我試圖從本地存儲中取出數組，所以當我刷新瀏覽器時，它將顯示待辦事項列表。我已經試過，我知道我需要做沿着在頁面加載/在OL中刷新時顯示本地存儲

localStorage.getItem

線的東西，但我不知道如何去這樣做。我想我需要把它放到一個不同的函數中，然後在我的JavaScript結尾調用這個不同的函數。我也認爲我需要爲此使用for循環。我想我可能需要重做我當前的JavaScript，但不知道該從哪裏出發。

的JavaScript

var masterList = []; 

function addToList(){ 
    var task = document.getElementById('todoInput').value; 
    var entry = document.createElement('li'); //2 
    var list = document.getElementById('orderedList'); //2 
    entry.appendChild(document.createTextNode(task)); //2 
    list.appendChild(entry); //2 

    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

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

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得到todo列表。如果不存在，則masterList將變爲空陣列，並將準備好將其存儲在todos之內。

注意：檢查是否有效，因爲由於Cors堵塞所以我無法測試它。

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(v){ //append each element into the dom 
 
     var task = v; 
 
     var entry = document.createElement('li'); //2 
 
     var list = document.getElementById('orderedList'); //2 
 
     entry.appendChild(document.createTextNode(task)); //2 
 
     list.appendChild(entry); //2 
 
    }) 
 
    } 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 
 
    entry.appendChild(document.createTextNode(task)); //2 
 
    list.appendChild(entry); //2 
 

 
    masterList.push(task); 
 

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

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

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

來源

2017-03-01 18:58:58

那沒有工作，我很欣賞的投入，但！ – bemon

@bemon這不是真正有用的回覆，爲什麼它不起作用？你在控制檯中是否有任何錯誤？ –

我很抱歉，並不意味着對回覆無益。當我更改我的代碼並運行它時，我沒有顯示任何錯誤，它只是沒有做任何與以前不同的事情。它仍然顯示在控制檯中，但沒有發生在屏幕上，我沒有看到任何錯誤顯示在控制檯或任何地方。 – bemon

在頁面加載/在OL中刷新時顯示本地存儲

回答

相關問題