localStorageに保存した内容が「０」と表示されてしまう

前提・実現したいこと

todoリストのアプリを作って、入力した内容をlocalStorageに保存したいと考えており、liタグにid属性を追加し、その値をgetElementByIdで取得して入力内容を保存する方法を取ろうとしています。

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

しかし、実際にブラウザ上で保存してみると、keyには指定した文字列が表示されるのですが、valueには「０」と表示されてしまいます。

該当のソースコード

<!DOCTYPE html>
<html lang="jp" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      .done{
        text-decoration: line-through;
      }
    </style>
  </head>
  <body>
    <ul></ul>
    <input id="new-todo" type="text">
    <button id="add-button">追加</button>
    <input type="button" id="save-button" onclick="onSave(this)" value="保存">
  </body>
  <script>
    const button = document.getElementById('add-button');
      //querySelectorを使う場合はid名の前に#をつける(class名を指定する場合はclass名の前に.をつける)
    button.addEventListener('click', () => {
      const input = document.getElementById('new-todo');
      const li = document.createElement('li');
        //指定した要素を新しく作る
      li.innerText = input.value;
      　//要素のテキストを設定(innerTextのところはtextContentでも問題ない)

      const doneButton = document.createElement('button');
      doneButton.innerText = 'done';
      li.appendChild(doneButton);
        //要素を指定したタグにに追加
      doneButton.addEventListener('click', () => {
        const li = doneButton.closest('li');
        li.classList.add('done');
      });

      const ul = document.querySelector('ul');
      ul.appendChild(li);
      //要素を指定したタグに追加
      li.setAttribute('id', 'todo');
      //liタグにid属性を追加
    });

    function onSave(obj){
      const todoStr = obj.getAttribute('id');
      const todolist = document.getElementById('todo').value;
      localStorage['todo'] = todolist;
    }

  </script>
</html>

試したこと

下記の2行目が必要ないのではないかと考えてその部分をコメントアウトにしてみたり、3行目の「todolist」を""で囲ってみたりと、素人なりに考えてみたのですが、徒労に終わりました。

 function onSave(obj){
      const todoStr = obj.getAttribute('id');
      const todolist = document.getElementById('todo').value;
      localStorage['todo'] = todolist;
    }

補足情報（FW/ツールのバージョンなど）

ブラウザはGoogleChrome、テキストエディタはAtomを使っています。

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

回答1件

ベストアンサー

localStorageの使い方はこうです
https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage
setItem,getItemというメソッドが用意されているのでそれを使ってください

あとchromeの検証ツールのconsoleを見ると
この部分でエラーでてます

javascript
1document.getElementById('todo').value

文字列を取得するなら

javascript
1document.getElementById('todo').innerText

です。

投稿2020/12/21 15:14

退会済みユーザー

総合スコア0

wada_RY

2020/12/22 00:31

valueをinnerTextに変えたら保存できました！回答ありがとうございました！！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！