Q&A
前提・実現したいこと
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件
0
ベストアンサー
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
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/22 00:31