JavaScriptでローカルストレージに設定した値を別ページで表示する方法【localStorage】

過去に「JavaScriptでセッションキーに設定した値を別ページで表示【sessionStorage】」を紹介しましたが、これとほぼ同じ用途と方法なのですがクライアントサイドのブラウザ側でJavaScriptを使ったブラウザローカルデータ保持の方法です。
今回はJavaScriptのlocalStorageを使ってローカルストレージに値を設定し、ローカルストレージの値を別ページで表示させる方法をご紹介します。

※Web StorageのlocalStorageとsessionStorageは保持するデータの有効期限に違いがあり、localStorageは永続的に保持したデータが有効に対し、sessionStorageはブラウザウィンドウやタブを閉じるまで有効となります。また保持可能はデータ量は共に5MBになります。保持データとしてのセキュリティは良くないので、個人情報や見られたら良くないデータの扱いは避けた方が良いです。

ローカルストレージに値を設定するページ（index.html）のHTMLとJavaScript記述

※window.localStorage.setItem([‘ローカルストレージ名’],[‘値’])を使って設定します。

<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>

ローカルストレージに値を設定するページ（page2.html）のHTMLとJavaScript記述

※window.localStorage.getItem([‘ローカルストレージ名’])を使って設定した値を表示させます。
　最後にwindow.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】JavaScriptを使ってローカルストレージに設定した値を別ページで表示させるデモページ

【localStorage】JavaScriptを使ってローカルストレージに設定した値を別ページで表示させるデモ

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。