Web開発の世界では、情報を効果的に保持する方法が常に重要です。特に、異なるページ間でのデータの受け渡しは、ユーザー体験の向上に直結します。以前、「JavaScriptのsessionStorageを使ってセッションキーに設定した値を別ページで表示する方法」を紹介しましたが、今回はそれと似ているものの、少し異なるテクニックをご紹介します。それは、JavaScriptのlocalStorageを活用したデータの保存と、そのデータを別ページでの表示です。
Web Storageとは
Web Storageには、localStorageとsessionStorageの二種類があります。これらは、ブラウザ上でより多くのデータを安全に保存するために使われます。両者の主な違いは、データの持続性にあります。localStorageはデータを永続的に保存し、ブラウザが閉じられてもデータは保持されます。一方、sessionStorageはブラウザのセッションが終了すると同時にデータも消去されます。また、これらのストレージは最大約5MBのデータを保存できますが、セキュリティ上の理由から、敏感な個人情報の保存には適していません。
ローカルストレージへの値の保存（index.html）：HTML、JavaScript記述
ローカルストレージに値を保存するには、JavaScriptのlocalStorage.setItemメソッドを使用します。
window.localStorage.setItem([‘ローカルストレージ名’],[‘値’])を使って設定します。
例えば、下記のコードはlocalStorageにls1というキーでlocals_dadunionという値を保存しています。
<h1>このページでローカルストレージ（localStorage）に設定した値を別ページで表示させます</h1>
<br>
このページではlocalStorage「ls1」に「locals_dadunion」をセットしました。<br>
下記のリンクをクリックすると「ls1」ににセットした値を別ページで表示させます。<br>
ブラウザのalertダイヤログメッセージで表示されます。<br>
<br>
<br>
<a href="page2.html">「ls1」ににセットした値を別ページで表示＞＞</a>
<script type="text/javascript">
//ローカルストレージの格納
window.localStorage.setItem(['ls1'],['locals_dadunion']);
</script>
このコードをindex.htmlページに配置することで、ユーザーがこのページを訪れると自動的にlocalStorageにデータが保存されます。
別ページで保存データの表示（page2.html）：HTML、JavaScript記述
次に、page2.htmlでは、保存されたデータを読み込み、表示します。
localStorage.getItemメソッドを使用して、指定したキーのデータを取得できます。window.localStorage.getItem([‘ローカルストレージ名’])を使って設定した値を表示させます。
さらに、localStorage.clearメソッドでローカルストレージのデータを全て削除することができます。
<h1>このページではブラウザのalertダイヤログメッセージで<br>ローカルストレージ「ls1」に設定されている値を表示し、<br>その後設定したローカルストレージを全て削除してます。</h1>
<br>
<br>
<a href="index.html">＜＜ローカルストレージを設定するページに戻る</a>
<script type="text/javascript">
alert(window.localStorage.getItem(['ls1']));
//ローカルストレージの削除
window.localStorage.clear();
</script>
このコードは、localStorageに保存されたls1の値を取得し、アラートダイヤログで表示します。その後、clearメソッドを呼び出し、ローカルストレージのデータを全てクリアします。
【localStorage】JavaScriptを使ってローカルストレージに設定した値を別ページで表示させるデモページ
実際の動作を見るには、以下のデモページをご覧ください。
【localStorage】JavaScriptを使ってローカルストレージに設定した値を別ページで表示させるデモ
まとめ
JavaScriptのlocalStorageは、異なるページ間でデータを共有する際に非常に便利です。ただし、保持するデータの種類には注意が必要で、セキュリティ上のリスクを避けるために、機密性の高い情報は保存しないようにしましょう。今回のテクニックを活用して、より良いユーザーエクスペリエンスを提供するウェブサイトを構築してみてください。
※流用される場合は自己責任でお願いします。
デモページ
