todoリストのデータが消えてしまいます

前提・実現したいこと

todoリストを作っているのですが、localstorageに保存するのですがwebページをリロードすると一部のデータが消えてしまいます

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>やることリスト</title>
        <link rel="stylesheet" href="todo.css">

        <body>
            <div id="container">
            <h1>やることリスト</h1>
            
            <input type="text" id="text_name">
            <input type="button" value="追加" onclick="add()">
            <ul id="todoList"></ul>
            
            </div>

            <script>

window.onload = function(){
    box = localStorage.getItem('key');
    for (var i =0; i < box.length; i++) {
    var li = document.createElement('li');
    li.textContent = box[i]
    document.getElementById('todoList').appendChild(li);
  }
}
                
                function add() {
                    var box = [];
                    var input = document.getElementById("text_name");
                    box.push(input.value);

                    localStorage.setItem('key', box);
                    
                    for (var i =0; i < box.length; i++) {
    var li = document.createElement('li');
    li.textContent = box[i]
    document.getElementById('todoList').appendChild(li);
  }
 

      }
      


            </script>

            
            </body>
        
</html>

試したこと

Webページを開いたときに読み込めばよいのかと思い。window.onload = function()を使ったりしているのですが現在解決していません。ご教示いただけると幸いです。

行動規範の内容に同意します

回答2件

クリックするたびに key という key に　値が上書きされてしまっているため
keyは一つしか保存されていません。
なのでkey1に値1 key2に値2 ・・・　という風にローカルストレージに保存する処理と
読み込み時に keyの数だけli要素を追加する処理
key1の値 key2の値それぞれを追加したli要素に適応する処理などが必要です。

Javascript
1        var liLen = localStorage.getItem("liLen");
2        var ul = document.getElementById('todoList');
3
4        for (let i = 0; i < liLen; i++) {
5            var li = document.createElement('li');
6            ul.appendChild(li);
7            ul.children[i].innerText = localStorage.getItem("key" + (i + 1))
8        }
9
10        function add() {
11            var li = document.createElement('li');
12            ul.appendChild(li);
13            var input = document.getElementById("text_name");
14            li.innerText = input.value;
15            localStorage.setItem("liLen", ul.children.length);
16            localStorage.setItem("key" + ul.children.length, li.innerText);
17        }

投稿2020/10/29 11:06

Jon_do

総合スコア1373

Jon_doさんと考え方は同じだけどちょっと違うアプローチ

html
1  <script>
2counter = 0;
3    
4    window.onload = function () {
5      l_length = localStorage.length;
6      var box = [];
7
8      for (var i = 0; i < l_length; i++) {
9        box_item = JSON.parse(localStorage.getItem("key" + i));
10        box.push(box_item);
11      }
12
13      for (var i = 0; i < box.length; i++) {
14        var li = document.createElement('li');
15        li.textContent = box[i]
16        document.getElementById('todoList').appendChild(li);
17      }
18    }
19
20    function add() {
21      
22      var box = [];
23      var input = document.getElementById("text_name");
24      box.push(input.value);
25
26      localStorage.setItem("key" + counter, JSON.stringify(box));
27
28      for (var i = 0; i < box.length; i++) {
29        var li = document.createElement('li');
30        li.textContent = box[i]
31        document.getElementById('todoList').appendChild(li);
32      }
33      counter ++;
34    }
35  </script>