jQueryでCookieに配列を渡し、ページ内にパースして表示する

2014/10/16 2016/1/25 JS/jQuery, UI/UX

とある案件でjsだけで当記事タイトルのような事を再現したいというクライアントの課題がありました。
Cookieでパースして表示するって記事はあんまり見つからなかったので書いてみます。

今回作ったDEMOは複数あるページの値を1つのcookieに保存し読み込む方法です。
DEMO(読み込み)ではh2、imgのsrc、aタグのhrefをパースして表示しています。
DEMO(保存)ではCookieに保存ボタン押下→cookie保存されます。
例えば「後で読む」機能のように値を保持して特定のページにリストで表示する。
または「閲覧履歴」も同じ様にリストで表示するなどアイディア次第でjsとcookieだけで色々作れそうですね。

そもそもjsでcookieを取得するには？

document.cookieで使えます。
ただdom操作、UI作成ではjQueryでやると思いますので下記「jquery.cookie.js」を使います。

jquery.cookie.js

お約束のjQuery読み込みとプラグイン読み込みをすませておきましょう。

使い方

$.cookieでcookieが使える様になります。

保存

$.cookie("KEY", "VALUE");

取得

$.cookie("KEY");

削除

$.removeCookie("KEY");

「KEY」が名前「VALUE」が値で保存されます。取得、削除は同じ様にKEYを引数に読み込みます。

今回作るDEMOは複数あるページの値を1つのcookieに保存し読み込む方法です。
最初はいくつかcookieを分けて保存しようかと思ったのですが、cookieの作成時間の値が取得できないので1つのcookie内に文字列を保存する方法にしました。

ここで一つ疑問。

Cookieって保存できる最大サイズってどのくらいなんでしょう？
下記参考サイトにもありますが、どのブラウザもだいたい4096byte程度のようです。

最新ブラウザのクッキーの制限(数,サイズ)を調べてみた

ですので、あまり長ったらしい文字列は扱わない様に気をつけます。

保存側htmlのソース

    $.cookie.json = true;
    var cookParam = $.cookie("push");
    if(cookParam == null){
        var cookParam =[]
    }
        $("#cook").click(function(){
    var flag    = $('#input1').val(),
        flagReg = new RegExp(flag);
        if(cookParam == null){
            cookParam = $.cookie("push");
        }
        if(cookParam.length > 7){
            cookParam.splice( 0, 3);
        }
        if(cookParam.indexOf(flag)!= -1){
            alert('既に登録されています')
        }else{
            for (i=1;i<=3;i++) {
                cookParam.push($("#input"+i).val());
            }
            $.cookie('push', cookParam);
            $('body').append('<p>cookieに追記しました。</p>')
        }
    });
});

inputのvalueを同じ文字列が無ければ配列にpush→既にあればalertという具合です。
今回のソースでは3件のリスト以上保存されると古い物からspliceで配列削除しています。
また、下記ソースの様に保存時にexpires:値を入れて上げると保存期間を指定できます。
$.cookie('名前', '値', { expires: 7 }); // 寿命は7日

読み込み＆パース表示側htmlのソース

    $.cookie.json = true;
    var cookParam = $.cookie("push"),
        resultElm = $('#result');
        list1       ='<li><h2>'+cookParam[0]+'</h2><p><a href="'+cookParam[2]+'"><img src="'+cookParam[1]+'"></a></p></li>',
        list2       ='<li><h2>'+cookParam[3]+'</h2><p><a href="'+cookParam[5]+'"><img src="'+cookParam[4]+'"></a></p></li>',
        list3       ='<li><h2>'+cookParam[6]+'</h2><p><a href="'+cookParam[8]+'"><img src="'+cookParam[7]+'"></a></p></li>'
        var undifindChk = 8 - cookParam.length;
        if(5 == undifindChk){
            resultElm.append(list1)
        }else if(2 == undifindChk){
            resultElm.append(list1)
            resultElm.append(list2)
        }else{
            resultElm.append(list1)
            resultElm.append(list2)
            resultElm.append(list3)
        }
    $('#remove').click(function(){
        $.removeCookie("push");
        location.reload();
    });

こちらではパースとあわせて配列がundifindだった場合の条件を記入しています。
以上になります。