localstorageで保存したデータを別画面に表示する方法を教えてください。
やりたいこと
・"まとめボタン"をクリックすると、A.htmlで保存したデータをB.htmlに出力。
できていること
・A.htmlでlocalstorageにデータを保存
・「送信」をクリックすると、localstorageに保存とその場でチャット形式で出力
できていないこと(躓いていること)
・"まとめボタン"をクリックすると、B.htmlにlocalstorageに保存されているデータを出力したいが、できていない。
試したこと
・'$("#id名").on("click", function(e) {'~でlocalstorageに入っているデータを'localStorage.getItem(STORAGE_KEY, JSON.stringify(data));'で取得
HTML
1---------------------中略---------------------------- 2<a href="B.html" id="matome"> 3 <img src="./img/matome.png" alt="" 4 class="Summary_button"></a> <!-- B.htmlに遷移するまとめボタン --> 5 6<ons-list id="chats"> 7 <img src="img/icon-face-01_2.png" class="icon_set"> 8</ons-list> 9 10<div class="send-area"> 11 <ons-input id="message" placeholder="メッセージ" 12 class="send-area__input"> 13 </ons-input> 14 <ons-button id="send" modifier="quiet" class="send-area__btn">送信 15 </ons-button> 16</div>
JavaScript
1 // ページの準備ができたら呼ばれる 2 ons.ready(function() { 3 4---------------------中略----------------------------------- 5 6 const STORAGE_KEY = 'message'; 7 //格納用の配列 8 let data = []; 9 10 // 送信ボタンを押した時の処理 11 $("#send").on("click", function(e) { 12 if($("#message").val() === "") return; 13 const chats = $("#chats").val(); 14 const value = $("#message").val(); 15 localStorage.setItem('chats', 'value'); 16 17 //配列へ追加 18 data.push({chats, value}); 19 20 //配列をローカルストレージへ保存 21 localStorage.setItem(STORAGE_KEY, JSON.stringify(data)); 22 23 // 自分の発言を画面右側に表示 24 $('#chats').append(` 25 <ons-list-item modifier="nodivider"> 26 <div class="right"> 27 <span class="msg">${$("#message").val()}</span> 28 </div> 29 </ons-list-item> 30 `); 31 // API Call 32 $.ajax({ 33 url: url, 34 type:'POST', 35 data : {apikey: apiKey, query: $("#message").val()} 36 }).then(function(data){ 37 38 // 成功したらレスポンスをchatbotの返事として画面左側に表示 39 $('#chats').append(` 40 <ons-list-item modifier="nodivider"> 41 <span class="msg--reply">${data.results[0]['reply']}</span> 42 <span class="list-item__subtitle">AIチャット</span> 43 </ons-list-item> 44 `); 45 }).fail(function(data){ 46 alert('失敗しました。'); 47 }); 48 49 // 元の入力内容は削除 50 $("#message").val(""); 51 52 }); 53 54}); 55
あなたの回答
tips
プレビュー