あるHTMLページから別のHTMLページにデータを送信したいと思います。のようなクエリパラメータを介してデータを送信しています http://localhost/project/index.html?status=exist
。この方法の問題は、データがURLに残ることです。JavaScriptまたはjqueryを使用してHTMLページ間でデータを送信する他の方法はありますか?
4 に答える
またはなどのHTML5ストレージオブジェクトに値を保存してみませんかsessionStorage
。詳細については、 HTML5ストレージドキュメントlocalStorage
にアクセスしてください。これを使用すると、中間値を一時的/永続的にローカルに保存し、後で値にアクセスできます。
セッションの値を保存するには:
sessionStorage.setItem('label', 'value')
sessionStorage.getItem('label')
以上恒久的に:
localStorage.setItem('label', 'value')
localStorage.getItem('label')
そのため、リロード後も保持できるHTML5ストレージオブジェクトを使用して、複数のページ間でフォームデータを(一時的に)保存できます。
私はこれが古い投稿であることを知っていますが、私は私の2セントを共有すると考えました。sessionStorage.getItem('label')
@Nejiは、、、およびを使用できるという点で正しいですsessionStorage.setItem('label', 'value')
(ただし、彼はsetItem
パラメーターを逆方向に持っていましたが、大したことではありません)。私は次のことをはるかに好みます、私はそれがより簡潔だと思います:
var val = sessionStorage.myValue
getItem
およびの代わりに
sessionStorage.myValue = 'value'
の代わりにsetItem
。
また、JavaScriptオブジェクトを保存するには、JavaScriptオブジェクトを文字列化して設定し、解析して取得する必要があることに注意してください。
sessionStorage.myObject = JSON.stringify(myObject); //will set object to the stringified myObject
var myObject = JSON.parse(sessionStorage.myObject); //will parse JSON string back to object
その理由は、sessionStorageはすべてを文字列として格納するため、sessionStorage.object = myObject
取得するのは[object Object]だけであり、あまり役に立ちません。
JavaScriptで使用するデータを転送するだけの場合は、次のようなハッシュタグを使用できます。
http://localhost/project/index.html#exist
したがって、データの取得が完了したら、メッセージを表示し、window.location.hashを適切な値に変更します。ページを更新するたびに表示されませhashtag
ん
注:代わりにこれを使用する場合は、データのクエリ文字列送信中のサーバーは取得/読み取りできません
実際にはJavaScriptを介してデータを送信できますが、これはXSSであるため、Webページで最大のエクスプロイトソースであることを知っておく必要があります:)
個人的には、代わりにHTMLフォーミュラーを使用し、サーバー側でjavascriptデータを変更することをお勧めします。
ただし、2つのページ間で共有する場合(2つの両方のバックエンド駆動型ページ間で共有することは意味がないため、両方がローカルホスト上にないことを前提としています)、ブラウザーができるようにCORSヘッダーを指定する必要があります。ホワイトリストに登録されたドメインにデータを送信します。
これらの2つのリンクは役立つかもしれません。ノードバックエンドを介した例を示していますが、それがどのように機能するかがわかります。
そしてもちろん、CORS仕様:
〜乾杯