web-dev-qa-db-ja.com

あるHTMLページから別のページにJavaScriptを介して変数を渡す

「ページ1」と「ページ2」の2つのページがあります。 1ページ目には、値が設定されたテキストボックスがあります。 100と最後にボタン。

ボタンを押すと、javascriptがテキストボックスの値をグローバル（？）変数に保存し、ページ2にジャンプします。「window.onload」では、2番目のJavascript関数がpage1に保存された値を警告します。

これが私のJavascriptコードです。

<script type="text/javascript">

var price; //declare outside the function = global variable ?

function save_price(){

    alert("started_1"); //just for information

    price = document.getElementById('the_id_of_the_textbox').value; 

    alert(price); //just for information         
}

<script type="text/javascript">

function read_price(){

    alert("started_2");

    alert(price);

}

「ページ1」には、このsendボタンがあります。

<input class="button_send" id="button_send" type="submit" value="Submit_price" onclick="save_price();"/>

Javascript関数を開始し、ページ2に正しくリダイレ​​クトします。

しかし、これで2ページ目：

window.onload=read_price();

グローバル変数価格の「未定義」の値を常に取得します。

これらのグローバル変数について多くのことを読みました。例えば。このページ： グローバル変数の問題.. しかし、私はそれを動作させることができません...

なぜこれが機能しないのですか？

javascripthtmlvariablesundefinedglobal
21
Kronwied

コードを読まずにシナリオだけを読まずに、localStorageを使用して解決します。以下に例を示します。簡単にPrompt()を使用します。

1ページ目：

window.onload = function() {
   var getInput = Prompt("Hey type something here: ");
   localStorage.setItem("storageName",getInput);
}

2ページ目：

window.onload = alert(localStorage.getItem("storageName"));

Cookieを使用することもできますが、localStorageではさらに多くのスペースが許可されており、ページをリクエストしてもサーバーに送り返されません。

40
potasmic

ここでの最良のオプションは、クエリ文字列を使用して値を「送信」することです。

javascriptを使用してクエリ文字列値を取得する方法

  • したがって、ページ1はpage2.html？someValue = ABCにリダイレクトします
  • ページ2は、クエリ文字列、具体的にはキー「someValue」を読み取ることができます

これが学習演習以上のものである場合は、これのセキュリティへの影響を検討する必要があります。

グローバル変数は、ページが再ロードされると破棄されるため、ここでは役に立ちません。

6
LiamB

いくつかの異なるオプションがあります：

  • sammyJS、Angularjsとui-routerなどのSPAルーターを使用できるため、ページはステートフルになります。
  • sessionStorageを使用して状態を保存します。
  • uRLハッシュに値を保存します。
2
Martin