前回の「【Monaca】Onsen UI + JavaScriptで買い物リストを作る」では、再起動するたびに買い物リストが消えてします。


今回は、localStorageを使用し、買い物リストを読み込み・保存する処理を付け加えます。

買い物リストを読み込む処理は、下記のとおりです。
初めて起動した場合、JSON.parse()の結果はnullとなるので、空の配列に直します。
[javascript]
var json = window.localStorage.getItem(“items”);
items = JSON.parse(json);
if (!items) items = [];
[/javascript]
買い物リストを保存する処理は、下記のとおりです。
配列の追加・修正・削除ごとに配置します。
[javascript]
window.localStorage.setItem(“items”, JSON.stringify(items));
[/javascript]
localStorageには、下記のように保存されます。

入力したデータが保存され、アプリ再起動後にそのデータが読み込まれる、アプリらしくなってきました。
[html]













[/html]

HUAWEI MediaPad T5 10 10.1インチタブレットW-Fiモデル RAM2GB/ROM16GB 【日本正規代理店品】

新品価格
¥20,072から
(2019/11/1 11:00時点)

Recommended Posts