ページのロード/リフレッシュにローカルストレージを表示OL

To Doリストを作成しようとしていて、別の問題が続いています。今、私はローカルストレージから配列を取得しようとしているので、ブラウザを更新するとTo Doリストが表示されます。私はページのロード/リフレッシュにローカルストレージを表示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を内部に格納する準備が整います。

ノート：SOのブロックが原因でテストできないため、動作しているかどうかを確認してください。動作しませんでした

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

答えて

関連する問題