Q&A
（質問文は編集できます）質問タグが「Java」になっていますが、内容は「JavaScript」です。両者は別言語なので、修正してください。
javascript初心者で、基本的な質問ですみません。
【実現したい内容】
ローカルストレージにデータを追加していく
「aaa」と入力
⇒aaaと表示される
その後、「bbb」と入力
⇒aaa
bbb
と表示されるようにしたいです。
【実際のプログラム】
html
1 2<!DOCTYPE html> 3<html> 4 <head> 5 <meta charset="utf-8"/> 6 <script language="javascript" type="text/javascript"> 7 // 読込 8 function load() { 9 var mydata = ""; 10 if(!localStorage.getItem('mydata')) { 11 mydata = "データがありません"; 12 } else { 13 mydata = localStorage.getItem('mydata'); 14 } 15 console.log(`mydata= ${mydata}`); 16 document.getElementById("mydata_out").innerHTML = mydata; 17 } 18 // 保存 19 function save() { 20 var mydata = document.getElementById("mydata_in").value; 21 console.log(`mydata_in = ${mydata_in}`); 22 localStorage.setItem('mydata', mydata); 23 } 24 </script> 25 </head> 26 <body> 27 localStrageに保存する値を入力して下さい<br /> 28 <input name="mydata_in" id="mydata_in" type="text" value="" /> 29 <br /> 30 <input type="button" value="読込" onclick="load();"/> 31 <input type="button" value="保存" onclick="save();"/> 32 <br /><br /> 33 <div id="mydata_out"></div> 34 </body> 35</html>
ネットで何度も検索して調べましたが、よく分かりません。
ご教授お願い致します。
回答1件
0
保存するときに入力欄に入ってる内容でデータを全部上書きしちゃってるからじゃないですか？
入力値を現在の出力内容に追記→保存
の順番でやればいいだけだと思う。
投稿2019/08/08 16:39
総合スコア8949
具体的にはどういった作業が必要なのでしょうか？
//取り出してパースする
datalist = JSON.parse(localStorage.getItem("datalist"));
datalist["data3"] = "hoge3";
//保存する
localStorage.setItem("datalist", JSON.stringify(datalist));
を付け加えてみているんですが、うまくできません。
入力値を現在の出力内容に追記→保存
以上の「具体的な作業」のアドバイスはありません。
そのコードも意図していることとズレてる気がしますが。
（datalistがどこから出てきたのか、"data3"に毎回固定値を上書きする意味は何なのか）
あぁ、「追記」がわからないとしたら
document.getElementById("mydata_out").innerHTML
の値に
document.getElementById("mydata_in").value
の値を追加することです。
ご丁寧にありがとうございます。
試してみます。
あなたの回答
tips
プレビュー
