Web ページ内のデータの保持

クエリ パラメーターを使用して HTML ページ間でデータを受け渡すと、URL でのデータの可視性の問題が発生します。ありがたいことに、JavaScript と jQuery には、ページ間でデータを伝達するための代替メカニズムがあります。

HTML5 ストレージ オブジェクトの活用

この問題を解決するために、HTML5 は sessionStorage や sessionStorage などのストレージ オブジェクトを提供します。ローカルストレージ。これらのオブジェクトは、ブラウザのローカル ストレージ内にデータを一時的または永続的に保存する手段を提供し、後で簡単に取得できるようにします。

セッション ストレージ

セッション ストレージ内の一時的なデータ ストレージ用単一のブラウザ セッションでは、sessionStorage が理想的です。 sessionStorage に保存されたデータは、セッションが終了するまで (ブラウザーのタブが閉じられるなど) アクセス可能なままです。

sessionStorage.setItem('label', 'value');
sessionStorage.getItem('label');

ローカル ストレージ

より永続的なストレージの場合は、localStorage がソリューションです。 localStorage に保存されたデータは、ブラウザを閉じて再度開いた後でも保持されます。

localStorage.setItem('label', 'value');
localStorage.getItem('label');

HTML5 ストレージ オブジェクトの利点

• データは非表示のままであり、URL での可視性の問題を回避できます。
• 保存された値は複数のページにわたって保持され、ブラウザの更新後も保持されます (localStorage の場合)。
• ページ間で共有する必要がある中間フォーム データやその他の重要な情報を保存するのに最適です。