フォームの入力・選択内容を自動保存してくれる「Garlicjs」プラグインの利用方法

お問い合わせページ等、フォームを設置したページで入力・選択した内容を保存したい。ページ遷移を挟む場合はPHPのセッションで保存できるが、挟まない場合はJavaScriptで色々対応しないといけなさそう。この辺りを簡単に実装できないか調べたところ「Garlicjs」プラグインが良さそう。以下にサンプルと実装方法をメモ。

サンプルページ

https://taitan916.info/sample/Garlicjs/

各項目の入力・選択後にスーパーリロード(Windowsの場合Ctrl + F5)しても、入力・選択内容が残っている点が確認できる筈。

また、リセットや送信ボタンを押すと入力・選択内容がリセットされる点が確認できる筈。

Garlicjs

公式サイト

http://garlicjs.org/

GitHub

https://github.com/guillaumepotier/garlic.js

CDN

CDNで使う場合は以下を記述する。jQueryも必要な点に注意。

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/garlic.js/1.4.2/garlic.min.js"></script>

実装方法

ソースコード

<form id="test-form" method="post">
    <div>
        textbox:
        <input type="text" name="textbox" id="textbox">
    </div>
    <div>
        textarea:
        <textarea name="textarea" id="textarea"></textarea>
    </div>
    <div>
        radio:
        <input type="radio" name="radio" value="1">
        <input type="radio" name="radio" value="2">
    </div>
    <div>
        checkbox:
        <input type="checkbox" name="checkbox" value="1">
        <input type="checkbox" name="checkbox" value="2">
    </div>
    <div>
        select:
        <select name="select" id="select">
            <option></option>
            <option value="1">select1</option>
            <option value="2">select2</option>
        </select>
    </div>
    <div>
        <input type="button" id="reset" value="リセット">
        <input type="submit" value="送信">
    </div>
</form>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/garlic.js/1.4.2/garlic.min.js"></script>
<script>
$(function(){
    //自動保存開始
    $(`#test-form`).garlic();

    //入力・選択内容をリセット
    $(`#reset`).on(`click`, function(){
        $(`#test-form`).garlic(`destroy`);
        $(`#textbox, #textarea, #select`).val('');
        $(`input[type="checkbox"]`).removeAttr(`checked`).prop(`checked`, false).change();
        $(`input:radio[name=radio]:checked`)[0].checked = false;
    });
})
</script>

保存場所

入力・選択内容はlocalStorageに保存される。そのためキャッシュクリア等でlocalStorageを削除された場合はリセットされる。

保存データの削除について

フォーム送信時に自動で削除される。

また、実運用だとあまり無さそうだけどリセットボタンを設置するような場合は「$(`#reset`).on(`click`, function(){」以降のように記述すること。