HTMLでフォームデータを失わずに現在のページをリロードする方法

フォームデータを保持したままページをリロードするには？

フォームに入力したデータを失うことなく現在のページをリロードしたい場合、最も簡単な方法はWeb Storageを利用することです。Web Storageには以下の2種類があります。

• localStorage： 永続的にデータを保存できるストレージ
• sessionStorage： ブラウザ（タブ）を閉じるまでメモリ上にデータを保持するセッションベースのストレージ

手順1：ページ再読み込み前に入力値を保存する

ページがリロードされる直前のタイミングで、フォームの入力値をlocalStorageに保存します。以下のコードを試してみてください。

window.onbeforeunload = function() {
    localStorage.setItem(name, $('#inputName').val());
    localStorage.setItem(phone, $('#inputPhone').val());
    localStorage.setItem(subject, $('#inputAddress').val());
}

手順2：ページ読み込み時にデータを復元する

次に、ページ読み込み時に保存しておいたデータを取得し、フォームの各フィールドに戻します。以下のように動作を確認できます。

window.onload = function() {
    var name = localStorage.getItem(name);
    var phone = localStorage.getItem(phone);
    if (name !== null) $('#inputName').val(name);
    if (phone !== null) $('#inputPhone').val(phone);
    // ...
}

補足：sessionStorageを使いたい場合

タブやブラウザを閉じたときにデータを自動的に消したい場合は、localStorageの代わりにsessionStorageを使用しましょう。APIは共通のため、setItemやgetItemメソッドをそのまま置き換えるだけで動作します。

注意点

Web Storageは便利な反面、平文でデータが保存されるため、パスワードやクレジットカード番号などの機密情報を格納するのは避けてください。あくまで一時的な入力補助として活用するのが安全です。また、ユーザーがブラウザの設定でストレージを無効化しているケースも考慮し、nullチェックによるエラー処理を必ず入れておくことをおすすめします。