JavaScript で HTML ページ間でデータを共有する方法: window.onload と localStorage を使用した変数の転送

JavaScript での HTML ページ間での変数の転送

複数の HTML ページが関係するシナリオでは、あるページから別のページに変数を転送する必要がよくあります。 。この課題に対処するために、この記事では、ページ間でデータを共有するための包括的なソリューションを提供する window.onload と localStorage という 2 つのメソッドを検討します。

Background

提供されたコードには、save_price() と read_price() という 2 つの関数が含まれており、ユーザー入力値をグローバル変数に保存および取得することを目的としています。ただし、ページ 2 でグローバル変数 Price を使用するときに問題が発生します。JavaScript にグローバル スコープがないため、「未定義」が返されます。

window.onload を使用した解決策

window.onload を使用する場合の問題点は、試行された関数呼び出しが正しくないことです。正しい形式は次のとおりです。

window.onload = function() {
  read_price();
};

このソリューションは機能しますが、特定の制限があります。グローバル変数は、特に大規模なアプリケーションにおいて、メンテナンスとコードの可読性において課題を引き起こす可能性があります。

localStorage を使用した代替ソリューション

localStorage は、相互間のデータ転送に対するより安全で効率的なアプローチを提供します。グローバル変数を必要としないページ。このメカニズムにより、ページのリロードやブラウザ セッション全体で保持されるキーと値のペアの保存が可能になります。

コードの実装

ページ 1:

window.onload = function() {
  var getInput = prompt("Enter a value: ");
  localStorage.setItem("value", getInput);
};

ページ 2:

window.onload = function() {
  alert(localStorage.getItem("value"));
};

localStorage の利点

• 永続ストレージ: ブラウザを閉じて再度開いた後でも、データへのアクセスは可能です。
• 膨大なストレージ容量: Cookie とは異なり、大量のデータを保存できます。
• サーバー側の回避: Cookie とは異なり、データはリクエストごとにサーバーに返送されません。

結論

window.onload とlocalStorage は、ページ間で変数を転送するためのメソッドを提供します。localStorage は、その広範な利点と使いやすさにより、推奨されるソリューションとして浮上しています。 localStorage の機能を活用することで、開発者はページ間でデータを効率的に共有し、ユーザー エクスペリエンスを向上させ、開発プロセスを合理化できます。

以上がJavaScript で HTML ページ間でデータを共有する方法: window.onload と localStorage を使用した変数の転送の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。