###前提・実現したいこと
Monaca学習中の初心者です。
Navigatorで画面遷移しているのですが、page2からpage1へons-back-buttonで戻った際に、テキスト入力していた値を保存しておき、再度page2へpushした際に値を復元したいのですが出来ません。
自分なりに考えlocalStorageを使用して、popボタンからの遷移では値の保存が出来るようになりました。
ons-back-buttonを使っても値が保存が出来るやり方や、何か他に良いやり方はありますでしょうか?
###該当のソースコード
JS
1 <script> 2 window.onload = function() { 3 localStorage.removeItem('page1_data'); 4 } 5 6 document.addEventListener('init', function(event) { 7 var page = event.target; 8 9 var pg1txt = JSON.parse(localStorage.getItem("page1_data")); 10 11 if (pg1txt !== null) { 12 document.getElementById("test_txt").value = pg1txt; 13 localStorage.removeItem('page1_data'); 14 } 15 16 if (page.matches('#first-page')) { 17 page.querySelector('#push-button').onclick = function() { 18 document.querySelector('#navigator').pushPage('page2.html'); 19 }; 20 21 } else if (page.matches('#second-page')) { 22 23 page.querySelector('#pop-button').onclick = function() { 24 var txt = document.getElementById('test_txt').value; 25 localStorage.setItem('page1_data', JSON.stringify(txt)); 26 document.querySelector('#navigator').popPage(); 27 }; 28 29 } 30 }); 31 </script>
###該当のソースコード
HTML
1<body> 2 <ons-navigator id="navigator" page="page1.html"></ons-navigator> 3 4 <ons-template id="page1.html"> 5 <ons-page id="first-page"> 6 <ons-toolbar> 7 <div class="center">Page 1</div> 8 </ons-toolbar> 9 10 <div class="content" style="text-align: center"> 11 <p>This is the first page.</p> 12 <ons-button id="push-button">Push page</ons-button> 13 </div> 14 </ons-page> 15 </ons-template> 16 17 <ons-template id="page2.html"> 18 <ons-page id="second-page"> 19 <ons-toolbar> 20 <div class="left"><ons-back-button>戻る</ons-back-button></div> 21 <div class="center">Page 2</div> 22 </ons-toolbar> 23 24 <div class="content" style="text-align: center"> 25 <p>This is the second page.</p> 26 <ons-input id="test_txt" type="text" modifier="underbar" placeholder="テキスト"></ons-input> 27 <p></p> 28 <ons-button id="pop-button">Pop page</ons-button> 29 </div> 30 </ons-page> 31 </ons-template> 32</body>
###試したこと
onsen uiのOnsen UI V2 JS Navigationテンプレートを用いて最小限のコードを記述してみました。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/15 22:42