--- title: 【ライブラリ】超簡単(手抜き?)cookie操作用のJavascript tags: JavaScript cookie author: gigamori slide: false --- Javascriptを使ったちょっとしたトラッキング用にcookie変数を扱う関数を作った。 cookieの属性には - expires - max-age - domain - path - secure - httponly があるが、以下の仕様で実装。 - 有効期限は`max-age`は互換性がないので使わず、`expires`で指定(日数で与える) - `expires`を指定しない場合はセッション限定のcookieとなる - `domain`は指定しないので現在のドメイン - `path`は指定がない場合はルート(`/`) - `secure`, `httponly`は特に指定しない 結構雑だが、最低限、実装するならこれでいいかも。 ちゃんとやりたいならjQueryとか使いましょう。 ```js // 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

GETのテスト

GET/hogeに12345をセット
GET/hogeに09876をセット
GETに12345と09876をセット
GET/hogeの値
GET/fugaの値

cookieのテスト

Cookie/hogehogeに123をセット
Cookie/hogehogeに空文字をセット
Cookie/hogehogeを消去
Cookie/fugafugaに890をセット(30日)
Cookie/fugafugaに290をセット(6秒)
Cookie/fugafugaに999をセット(違うドメイン)
Cookie/fugafugaに700をセット(違うパス)
Cookie/hogehogeの値
Cookie/fugafugaの値
``` ## Javascriptの便利なライブラリ - [JavascriptでYahoo!などのタグマネージャに渡すためのイベントを発生させる](http://qiita.com/gigamori/items/ec7542b19244c6776cd5) - [Javascriptで正規分布の実装まとめ(乱数、累積分布関数など)](http://qiita.com/gigamori/items/e17e6f9faffb78822c56) - [超簡単(手抜き?)cookie操作用のJavascript](http://qiita.com/gigamori/items/8a7d0cd29c05716bc2da) - [超シンプルに、イベントハンドリング用の関数](http://qiita.com/gigamori/items/d0c5f5842671ec634f4a) - [スマホのタップ対策済みのクリックイベントリスナ(スワイプやフリックは除外)](http://qiita.com/gigamori/items/5cdc91817564be66c2e6)