Cookieを操作するjs.cookie.jsでフォームの状態を保存／復元を簡単にする

7543 ワード
cookie form HTML jQuery JavaScript HTML テキストリンク

js.cookie.jsとは

js.cookie.jsは、jquery.cookie.jsから発展したプロジェクト
発展プロジェクトなので機能的にはほぼ同等だが使い方（取得や保存など）が異なる。

jquery.cookie.jsの情報がたくさんあるのに
js.cookie.jsの情報が極端に少ない！ということでメモ書き

今回参考にしたのはこのサイト：http://illbenet.jp/view/51

リポジトリ

JavaScript Cookie

A simple, lightweight JavaScript API for handling cookies

こちらからダウンロード可能ですが今回はCDNを利用していきます

　必要なライブラリ

今回の目的であるフォームの保存／復元を簡易的にするには以下ライブラリを利用する必要があります

ライブラリ名 使用用途
jquery.js js.cookie.jsが依存しています
underscore.js form情報をシリアライズしてCookie保存する際に利用します
js.cookie.js 今回の主役

ソース

スクリプトの読み込み

必要なライブラリを記述していきます。
今回は簡単に全てCDN版でいきます

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.4/js.cookie.min.js"></script>

フォーム送信時のフック

フォームの情報保持をsubmitのタイミングで行うため、フック関数を用意
ドメインや保持期間は適宜変更してください
基本的にはformのセレクタとCookies.set(〜)の部分の変更で動きます

$('#form').submit(function(){
    // form data to array
    var data = _.chain($('#form').serializeArray())
        .map( function(i) { return [i.name, i.value]; } )
        .object().value();
    Cookies.set('COOKIE_NAME', data, { expires: 7, path: '/', domain: 'localhost' });

    return true;
})

フォームの復元

保存した情報を元にフィームの復元を行います

$(function(){
    var opt = Cookies.get('COOKIE_NAME');
    var dataObj = JSON.parse(opt);

    $.each(dataObj, function(name, value) {
        var selector = $.format("input[name='%s']", name);

        //form部品に応じて処理を追加してください radioボタン等は追記必要かと思います
        if(selector.prop("type") === "checkbox"){
            selector.prop('checked',true);
        }
        else{
            selector.val(value);
        }
    });
});

まとめ

基本的にFormに依存するわけではないのでFormのセレクタや部品処理を適宜加えてあげれば利用できるかと思います。

※radioボタンの処理を記述してないのはめんどくさかったからですごめんなさい

Java実装LeetCode 518.小銭両替II(ダイナミックプランニング)
Android SDKで問題解決を更新できない