フォームの送信時にデータを保存する
サンプル2はユーザーがボタンをクリックしたときにデータを保存／読み込んでいましたが、実際のWebページではデータをサーバーに送信する時に保存しておき、ページを再度開いたときに保存したデータを書き戻すのがよいでしょう。
そこでサンプル2を改良し、ページの構築時にローカルストレージからデータを読み出し、送信時にはデータを保存するようにしたのがサンプル3です。JavaScriptの条件処理をうまく利用することで面倒な判定処理がなくなり、サンプル2に比べてシンプルなスクリプトになりました。条件処理には、||（論理和）を使っています。||は以下のように、左側の式が偽であれば右辺の処理を実行します。
例：
a = 12 || 34 ⇒aには12が入る
a = undefined || 34 ⇒aには34が入る
a = undefined || 34 || undefined || 56 ⇒aには34が入る。以後の右辺は処理されない
以下の場合、||より前の段階で保存されたデータがあれば利用し、データが存在しない場合はundefinedとなるため以後の処理を実行します。データが保存されていない場合は空文字にしたいので""と記述しておきます。
document.getElementById("uName").value = window.localStorage.getItem("uName") || "";
ページが読み込まれると自動的にローカルストレージから保存した内容が読み出され、テキストフィールドに表示される
<h1>ローカルストレージを利用したフォーム</h1>
<form id="dataForm" method="post" action="./sample.cgi" onsubmit="return false">
名前：<input type="text" name="uName" id="uName"><br>
年齢：<input type="text" name="uAge" id="uAge"><br>
<input type="submit" value="送信">
</form>
<script>
(function(){
// 最初にローカルストレージが使えるか調べる。使えない場合は何もしない
if (!window.localStorage) return;
// ローカルストレージからフォームにデータを戻す
document.getElementById("uName").value = window.localStorage.getItem("uName") || "";
document.getElementById("uAge").value = window.localStorage.getItem("uAge") || "";
// データ送信時にローカルストレージにフォーム内容を保存する
document.getElementById("dataForm").addEventListener("submit", function(){
window.localStorage.setItem("uName", document.getElementById("uName").value);
window.localStorage.setItem("uAge", document.getElementById("uAge").value);
alert("データを保存しました");
}, true);
})();
</script>
