アプリのデータをまとめて保存したい

Question

###前提・実現したいこと
単語帳アプリを開発しています。
ons-splitterでページ遷移を行うのですが、教科のページを移動するたびに登録した単語がリセットされます。
そのためデータを保存する必要があり、Google先生にも頼ったのですがイマイチ分からず...

<div>子要素</div>のような場合に、子要素(ons-list-item)をまとめて保存したりできるのでしょうか？ ###発生している問題・エラーメッセージ データをどのような形でも保存したい。 ###該当のソースコード ```html <!-- スプリッター --> <ons-splitter> <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable> <ons-page> <ons-toolbar> <label class="center">教科選択</label> </ons-toolbar> <ons-list> <ons-list-item class="subject hi" onclick="fn.load('history.html')" tappable> 前回の記録 </ons-list-item> <ons-list-item class="subject ja" onclick="fn.load('japanese.html')" tappable> 国語 </ons-list-item> <ons-list-item class="subject math" onclick="fn.load('math.html')" tappable> 数学 </ons-list-item> <ons-list-item class="subject en" onclick="fn.load('english.html')" tappable> 英語 </ons-list-item> </ons-list> </ons-page> </ons-splitter-side> <ons-splitter-content id="content" page="history.html"></ons-splitter-content> </ons-splitter> <!-- ダイアログ --> <ons-template id="dialog1.html"> <ons-dialog id="dialog1" cancelable> <ons-toolbar inline> <label class="center">追加</label> <div class="right"> <ons-toolbar-button modifier="quiet" onclick="hidedlg1()"> 完了 </ons-toolbar-button> </div> </ons-toolbar> <div style="text-align: center"> <p> <ons-input id="dlg1_input" modifier="underbar" placeholder="単元名"></ons-input> </p> </div> </ons-dialog> </ons-template> ``` ```html <!-- 教科別のページ --> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button onclick="fn.open()"> <ons-icon icon="ion-navicon, material:md-menu"></ons-icon> </ons-toolbar-button> </div> <div class="right"> <ons-toolbar-button class="addbtn1" id="xx_btn1" onclick="showdlg1()"> <ons-icon icon="ion-plus"></ons-icon> </ons-toolbar-button> </div> <div class="center"> 教科名 </div> </ons-toolbar> <ons-list id="xx_list1"> </ons-list> </ons-page> <!-- コード中の xx の部分は "ja","math","en" の３つ --> ``` ```javascript /* スプリッターの制御*/ ons.ready(function() { console.log("Onsen UI is ready!"); }); window.fn = {}; window.fn.open = function() { var menu = document.getElementById('menu'); menu.open(); }; window.fn.load = function(page) { var content = document.getElementById('content'); var menu = document.getElementById('menu'); content .load(page) .then(menu.close.bind(menu)); };

/* ダイアログ関連の動作もろもろ*/
ons.ready(function() {
});
function showdlg1() {
/* 教科のid要素を取得します*/
var idname = $('.addbtn1').attr("id");
var subject = "";
if(idname == 'ja_btn1') {
subject = 'ja';
}
else if(idname == 'math_btn1') {
subject = 'math';
}
else if(idname == 'en_btn1') {
subject = 'en';
};
sessionStorage.setItem('test', subject);
/* ダイアログを表示します*/
var dialog1 = document.getElementById('dialog1');
if(dialog1) {
dialog1.show();
}
else {
ons.createDialog('dialog1.html').then(function(dialog1) {
dialog1.show();
});
};
}
function hidedlg1() {
/* htmlに新しいリストを追加します*/
var value = $('#dlg1_input').val();
if(!value) {
alert("なにか入力してください");
return;
};
var subject = sessionStorage.getItem('test');
var idname = subject+'list1';
var classname = 'subject '+subject;
var size = $('#'+idname).children('ons-list-item').length;
var itemHTML =
'<ons-list-item id="'+subject+''+size+'" class="subject '+subject+'" modifier="chevron" name="'+subject+'_"'+size+'">' +
value +
'</ons-list-item>';
$('#'+idname).prepend(itemHTML);
/* ダイアログを非表示にします*/
dialog1.hide();
$('#dlg1_input').val("");
};

###試したこと
丸投げ状態ですが、誰も頼る人がいないのです...

###補足情報(言語/FW/ツール等のバージョンなど)
Monaca,Onsen UI,JavaScript,jQuery

Answer 1

データの保存は色々とやりかたがありますが、一番シンプルなのはlocalStrageでしょうか。

localStorageを使用して端末にデータを保存する

簡単な使用例を書いておきますので、組み合わせて使ってください。

<!-- 動的操作を行えるよう、idを振ってください -->
  <ons-list id ="mathList">
  </ons-list>

//アプリ起動時
var mathWordList =  JSON.parse(localStrage.getItem("math"));
//console.log(mathWordList);

//単語更新時
mathWordList.push("新しい単語");
localStrage.setItem("math" , JSON.stringify( mathWordList ) );

//ページ遷移時
var tmplist = "";
for(key in mathWordList){
  tmplist += "<ons-list-item>" + mathWordList[key] + "</ons-list-item>"
}
$('#mathList').html(tmplist);

Comments

[Gecko]

value値をすべて配列にまとめてるんですね。勉強になります(._.)

Answer 2

まずは全容を把握するところからかと。
データの保存を行う場所はすごーく大別すると以下２タイプになります。

A. アプリ自体に保存する
-> あたりまえだが、他の環境（別デバイスやPCなど）からはデータを取得できない。
-> （基本的には）スマホを機種変更したらデータは消えると思った方が良い。
-> スマホのストレージを使用するので残容量を食っていく（とはいえ単語帳くらいなら問題にならない事が多い）
-> 簡単
-> 高速・ネットに繋がってなくても使える

このパターンならとりあえずnamimonさんが提供していくれている方法が一番簡単だと思います。
localstorage以外にもwebSQLやIndexedDBとかあるけど、単語帳なら簡単なlocalstorageかな。
仮に趣味で開発するくらいならこっちで十分です。

B. サーバーをたてて、ネットワーク越しに通信して保存する
-> ユーザー登録してもらって、そのユーザーに紐づけるようにサーバーにデータを保持する。
-> アプリからログインして使う
-> PC向けwebアプリとかを作ればそちらからもデータ取得できるし、他のスマホからもログインすればデータ取得できる。機種変更も問題ない。
-> データはサーバーに保管されるので(基本的には)スマホのストレージを圧迫しない
-> 難しい。後述するけど、簡単に使えるサービスを使うのがよろしいかと。
-> 基本的にはネットワークを介してデータ取得・保存するのでネット環境につながっている状況で使う前提。よってAに比べると遅い

こっちのパターンがやりたいなら、firebaseが一番簡単でおすすめです。ネットワークがオフラインの場合の対応なども簡単にできます。
本格的なビジネス用途ならこっちのパターンが多いんじゃないかな。