no-image

Web開発

jQuery + WebStorage でフォームを自動保存する

2018年9月27日

Web でフォームを入力中に文字を消そうと Backspace を叩いたつもりが、テキストボックスからフォーカスが外れていて Web ブラウザのページ遷移が発生してしまって全て消えたという経験は誰しもが一度はあると思います。

最近の Web ブラウザの中には、フォーム入力中でページ遷移が発生しそうになると事前に注意をしてくれるものもあります。

そういった環境でなくても、JavaScript で定期的にフォームの内容を自動的に保存してしまおうというのが今回の趣旨です。

実装

<script type="text/javascript">
$(function() {
    // Web Storageにフォームを保存
    function saveForm() {
        // Key Valueでid, valueを格納
        let f = {};
        $("input").each(function () {
            f[$(this).attr("id")] = $(this).val();
        });
        
        // 辞書をJSON文字列化してWebStorageに保存
        localStorage.setItem("form", JSON.stringify(f));
    }
 
     // Web Storageからフォームを読込み
    function loadForm() {
        let f = JSON.parse(localStorage.getItem("form"));
        for (key in f)
            $("#" + key).val(f[key]);
    }
        
    // 前回の入力を読み込む
    loadForm();
    
    // 自動保存のインターバルタイマー(5秒毎)
    setInterval(saveForm, 5000);
});
</script>

解説

WebStorage は key = value 形式で情報を保存します。セッション限り有効な sessionStorage と永続的な localStorage があります。今回は、間違ってウィンドウを閉じても復元したいので localStorage を選びました。

localStorage.setItem(key, value);
localStorage.getItem(key);

form 要素内の input 要素を順に走査して key, value に id, value の形式で保存すれば良いのですが、WebStorage を他の用途に使うことも考えられるので、JSON にして "form" という key に保存することにしました。

let f = {};
$("input").each(function () {
    f[$(this).attr("id")] = $(this).val();
});

これで一旦全ての input 要素を id = value 形式で辞書に格納しています。注意点としては id 属性を key としているので、id 属性がないと保存されません。ここは name 属性にしたり、適宜変更する形になると思います。

localStorage.setItem("form", JSON.stringify(f));

辞書を JSON 文字列化して一つの key に保存しています。これで無駄に key を消費せずに保存できます。

JSON で保存したので、読み込むときも JSON として処理する必要があります。

let f = JSON.parse(localStorage.getItem("form"))

id 属性で拾った理由は、値をフォームにセットし直すときにセレクタが簡易に書けるからです。

for (key in f)
    $("#" + key).val(f[key]);

定期的に自動で保存するために、インターバルタイマーで 5 秒置きに saveForm() を呼び出すようにしました。

setInterval(saveForm, 5000);

これでページが読み込まれてから 5 秒置きに自動でフォームの内容が保存されるようになりました。

参考