jQuery cookieを使ってページの表示履歴を保持する

Tweet

Share on Tumblr

jQuery cookieを使ってページの表示履歴を保持する | Bamboo lath 日々の記録ページの表示履歴簡易的に取りたいということなのでjQueryを使ってどうやるのか調べてみた。

こちらを参考にしました。
jQueryを使ってクッキーを操作

jquery.cookie.jsを使うらしいのでこちらからダウンロード

自作した外部ファイル

$(function(){
    var COOKIE_NAME = 'test_cookie_name';
    var COOKIE_PATH = '/';

    var page_array = [];
    if($.cookie(COOKIE_NAME)){
        page_array = $.cookie(COOKIE_NAME).split("-");
    }

    // 現在開いているページのファイル名を取得
    var file_url = location.href;
    file_url = file_url.substring(file_url.lastIndexOf("/")+1,file_url.length);
    file_url = file_url.substring(0,file_url.indexOf("."));

    if( $.inArray(file_url, page_array) == -1) {
        // cookieから取得した配列内に存在しない場合は追加
        page_array.push(file_url);
    }

    // パス(/)や有効期限(3日)を指定する
    var date = new Date();
    date.setTime(date.getTime() + ( 1000 * 60 * 60 * 24 * 3 ));

    // とりあえず"-"区切りで連結してcookieに格納
    $.cookie(COOKIE_NAME, page_array.join("-"), { path: COOKIE_PATH, expires: date });
})

履歴を取得したいページでの読込み例(ここでは自作の外部ファイルをhistory_sample.jsとしている)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.cookie.js"></script>
<script type="text/javascript" src="./history_sample.js"></script>

cookie_sample.html
cookie_sample2.html
cookie_sample3.html
とかのファイルに仕掛けた場合、3ファイルをブラウザで開いたあとはcookiに以下のような
値がはいります。

データの保存方法が・・・とかありますがとりあえずサンプルなのでこれで。