Local Storage に設定した値を配列化し画面上に表示したい
解決したいこと
HTMLのinputに入力した値を一度Local Storageに保存し、過去に入力した値とともに配列化し
HTMLに表示したいと考えています。
Local Storageに値を設定することはできましたが、そこから値を取り出して配列化することができません。
「①Vue.jsを使ってLocal Storageから値を取得する方法」と
「②配列化して値をHTMLに表示する方法」について
ご教示ください。
使用している環境
CodePen
発生している問題・エラー
HTMLコード
<div class="col-sm-3 mx-auto">
<input type="number" max="1000" min="10" v-model:value="sessyu" placeholder="0"><br><br>
<button type="button" class="btn btn-danger" v-on:click="addTask">履歴追加</button>
<br>
<div class="row my-1">
<p v-for="cafe in sessyuList">{{ cafe }}</p>
</div>
<br>
<div class="row my-1">
<p v-for="cafelist in allList">{{ cafelist }}</p>
</div>
</div>
Javascriptコード
methods: {
// 関数はここ
addTask: function () {
//画面上に表示
console.log("次の数値が追加されました：", this.sessyu);
// 配列の先頭に現在のタスク内容を追加する（最後尾の場合はpush）
var date = moment(new Date()).format("YYYY/MM/DD");
var tuika = date + " " + this.sessyu + " mg";
this.sessyuList.unshift(tuika);
console.log("現在の摂取一覧：", this.sessyuList);
//localStorageに値設定
var newkey = moment(new Date()).format("YYYYMMDDhhmmss");
var newval = this.sessyu;
localStorage.setItem(newkey, newval);
console.log(localStorage);
//配列を一度クリア
this.allList = [];
//localStorageの値を取得
for (var i = 0; i < localStorage.length; i++) {
//キーとその値を読む
var key = localstrage.key(i);
this.info = JSON.parse(localstrage.getItem(key));
var val = this.info.key + " " + this.info.value;
console.log(val);
this.allList.unshift(val);
}
},
コードを書く上で参考にしたサイト・記事
下記記事とサンプルコードをもとに上記コードを作成しました。
Vue.jsのループ処理について調べましたが、HTML上で配列をループし表示する記事は見つかりましたが
ループ処理で配列を作成する記事は見つけられませんでした。
ループ処理で参考にしたコード
<div>
<h2>データの登録</h2>
<!-- キー指定 -->
キー（固定）
<input id="newkey" type="text" value="test_message" /><br>
<!-- 値指定 -->
値（なにか入力してね）
<input id="newval" type="text" value="" /><br>
<button onclick="save()">保存する</button>
</div>
<div>
<h2>Local Storage</h2>
<textarea id="data" rows="10" cols="100" readonly placeholder="何もないよ"></textarea><br>
<button onclick="read()">確認する</button>
<button onclick="del()">すべて削除する</button><br>
</div>
// Local Storageからデータを読み出し
function read() {
// 結果文字列
let result = '';
// 全てのキーを読み出す
for (var i = 0; i < localStorage.length; i++) {
// キーとその値を読む
const key = localStorage.key(i);
const val = localStorage.getItem(key);
// 結果文字列に追加する
result += `キー「${key}」には「${val}」が保存されています。\n`
}
// textareaに結果の文字列を反映させる
document.getElementById('data').value = result;
}
0
