質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Q&A

0回答

1152閲覧

localstorageで保存したデータを別画面に表示させる方法を探しています

PHP_NewYorker

総合スコア3

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

0グッド

1クリップ

投稿2020/11/25 07:06

編集2020/11/25 08:29

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/11/25 07:31

タグ足りてないような。 https://teratail.com/tags/Onsen+UI いずれにしても現在のコードにおける問題点は何でしょう。 コードだけ提示されても「できてること」「できてないこと」「調べたこと」「試したこと」は伝わりません。
PHP_NewYorker

2020/11/25 07:46

OnsenUIのタグを追加していなかったですね。 ご指摘ありがとうございます。
PHP_NewYorker

2020/11/25 07:50

修正しました。(まだ伝わりにくいかもしれませんが…)
m.ts10806

2020/11/25 08:02

現在のコードにおける問題点は何でしょう。「できてること」「できてないこと」は何でしょうか。 他者の書いたコードなのでどういうつもりでどこまでできてるかというのはコード読んだだけじゃ分かりませんよ。
PHP_NewYorker

2020/11/25 08:23

コードに対しての「できてること」と「できていないこと」ということでしょうか。 文章では「できてること」「できていないこと」を追記させていただきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問