【ライブラリ】超簡単（手抜き？）cookie操作用のJavascript #JavaScript

Javascriptを使ったちょっとしたトラッキング用にcookie変数を扱う関数を作った。

cookieの属性には

expires
max-age
domain
path
secure
httponly

があるが、以下の仕様で実装。

有効期限はmax-ageは互換性がないので使わず、expiresで指定（日数で与える）
expiresを指定しない場合はセッション限定のcookieとなる
domainは指定しないので現在のドメイン
pathは指定がない場合はルート（/）
secure, httponlyは特に指定しない

結構雑だが、最低限、実装するならこれでいいかも。
ちゃんとやりたいならjQueryとか使いましょう。

// cookieから値を取得
function getCookieValue(name){
    if (name === undefined) { throw 'argument missing!'; }
    var strResult = null;
    if (navigator.cookieEnabled && document.cookie) {
        var strParamName = name + '=';
        var strCookie = document.cookie;
        var iKeyStart = strCookie.indexOf(strParamName);
        if(iKeyStart != -1){
            var iValStart = iKeyStart + strParamName.length;
            var iValEnd = strCookie.indexOf(';', iValStart);
            if(iValEnd == -1) { iValEnd = strCookie.length; }
            strResult = '' + decodeURIComponent(strCookie.substring(iValStart, iValEnd));
        }
    }
    return strResult;
}

// cookieから値の一覧を取得
function getCookieValues(){
    var oResult = null;
    if (navigator.cookieEnabled && document.cookie) {
        var arrCookie = document.cookie.split(';');
        for (var i = 0; i < arrCookie.length; i++) {
            var arrKeyValue = arrCookie[i].split('=');
            oResult[arrKeyValue[0].replace(/^\s+|\s+$/g, '')] = arrKeyValue[1];
        }
    }
    return oResult;
}

// cookieに値をセット
function setCookieValue(name, value, iDayLife, path){
    if (name === undefined || value === undefined) { throw 'arguments missing!'; }
    path = path || '/';
    if (navigator.cookieEnabled) {
        var strCookie = name + '=' + encodeURIComponent(value);
        if(iDayLife !== undefined) {
            var d = new Date();
            d.setTime(d.getTime() + 1000 * iDayLife * 60*60*24);
            strCookie += '; expires=' + d.toUTCString();
        }
        strCookie += '; path=' + path;
        document.cookie = strCookie;
    }
}

// （GETの）URLからパラメータ取得
function getQueryValue(name){
    if (name === undefined) { throw 'argument missing!'; }
    var strResult = null;
    var strParamName = name + '=';
    if(window.location.search.length > 1){
        var strQuery = window.location.search.substring(1);
        var iPosition = strQuery.indexOf(strParamName);
        if(iPosition != -1){
            var iStart = iPosition + strParamName.length;
            var iEnd = strQuery.indexOf('&', iStart);
            if(iEnd == -1) { iEnd = strQuery.length; }
            strResult = '' + decodeURIComponent(strQuery.substring(iStart, iEnd));
        }
    }
    return strResult;
}

// パラメータのオブジェクトからGETのURLなどで使うクエリ文字列を生成
function getQueryString(oParams){
    var strQuery = '';
    for (var key in oParams){
        strQuery += key + '=' + oParams[key] + '&';
    }
    return strQuery.substr(0, Math.max(strQuery.length-1, 0));
}

cookie動作もろもろテストに使ったHTML

<html>
<head>
<script>
//
// 上記の関数群を挿入
//
(function() {
    var iPV = getCookieValue('iPV') || 0;
    iPV = parseInt(iPV) + 1;
    setCookieValue('iPV', iPV, 30);
    if (iPV > 1) {
        // 2PV目以上であればイベントを発生させてタグマネージャに送る実装やってた
        var event = document.createEvent('HTMLEvents');    
        event.initEvent('nonBounce', false, true);    
        window.dispatchEvent(event); 
    }
    alert(iPV + 'PV目です');
}());
</script>
</head>
<body>
<h2>GETのテスト</h2>
<a href="?hoge=12345">GET/hogeに12345をセット</a><br>
<a href="?fuga=09875">GET/hogeに09876をセット</a><br>
<a href="?hoge=12345&fuga=09876">GETに12345と09876をセット</a><br>
<a href="#" onclick="alert(gqv('hoge'));return false;">GET/hogeの値</a><br>
<a href="#" onclick="alert(gqv('fuga'));return false;">GET/fugaの値</a><br>

<h2>cookieのテスト</h2>
<a href="#" onclick="document.cookie='hogehoge=123';return false;">Cookie/hogehogeに123をセット</a><br>
<a href="#" onclick="document.cookie='hogehoge=';return false;">Cookie/hogehogeに空文字をセット</a><br>
<a href="#" onclick="var d=new Date();d.setTime(d.getTime()-1);document.cookie='hogehoge=; expires='+d.toUTCString();return false;">Cookie/hogehogeを消去</a><br>
<a href="#" onclick="var d=new Date();d.setTime(d.getTime()+1000*60*60*24*30);document.cookie='fugafuga=890; path=/; expires='+d.toUTCString();return false;">Cookie/fugafugaに890をセット（30日）</a><br>
<a href="#" onclick="var d=new Date();d.setTime(d.getTime()+1000*6);document.cookie='fugafuga=290; path=/; expires='+d.toUTCString();return false;">Cookie/fugafugaに290をセット（6秒）</a><br>
<a href="#" onclick="document.cookie='fugafuga=999; path=/; domain=test.com';return false;">Cookie/fugafugaに999をセット（違うドメイン）</a><br>
<a href="#" onclick="document.cookie='fugafuga=700; path=/test/';return false;">Cookie/fugafugaに700をセット（違うパス）</a><br>
<a href="#" onclick="alert(gcv('hogehoge'));return false;">Cookie/hogehogeの値</a><br>
<a href="#" onclick="alert(gcv('fugafuga'));return false;">Cookie/fugafugaの値</a><br>

</body>
</html>

【ライブラリ】超簡単（手抜き？）cookie操作用のJavascript

Javascriptの便利なライブラリ