Home > スポンサー広告 > User JavaScriptの練習 - Cookieにデータを保存する(続)

スポンサーサイト

スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/153-ef53b72a
Listed below are links to weblogs that reference
スポンサーサイト from Karafuto Blog

Home > スポンサー広告 > User JavaScriptの練習 - Cookieにデータを保存する(続)

Home > user javascript > User JavaScriptの練習 - Cookieにデータを保存する(続)

User JavaScriptの練習 - Cookieにデータを保存する(続)

user javascript

User JavaScriptの練習 - Cookieにデータを保存するの続き。

userjs_setcookie_operahistory.png

サイトを訪れた回数だけでなく、訪れたページの URLとページごとの回数を Cookieに記録するようにしてみた。

  • 「opera.com」ドメインのページを開いたら、Cookieを読み取り、'historyCount'の名前が見つかればその値を取得する。
  • 訪問回数を1回足して、Cookieに書き込む。
  • 訪問回数を左上に表示する。
  • 左上(3.)にマウスカーソルを乗せると、訪れたページのURLと回数を表示する。
  • 左上(3.)をクリックすると、クッキーを削除する。
  • 有効期限は1週間。1週間サイトに訪れなければCookieは消去される。
// ==UserScript==
// @include     http://*.opera.com/*
// ==/UserScript==

if (document.domain.indexOf('.opera.com') > -1){
    document.addEventListener('DOMContentLoaded', function (){

        function main(){
            var ck = new Cookie('historyURL', '', '.opera.com', '/', 60 * 60 * 24 * 7);
            ck.get();
            ck.add(location.href);
            ck.set();
            ck.makeElement();
            ck.display('count');

            // クリックでクッキーを削除
            ck.element.addEventListener('click', function (){
                ck.second = 0;
                ck.set();
                this.style.display = 'none';
            }, false);
            // 左上にマウスカーソルを乗せると訪問履歴を表示
            ck.element.addEventListener('mouseover', function (){
                ck.display('urlList');
            }, false);
            // 左上からマウスカーソルが離れると訪問回数を表示
            ck.element.addEventListener('mouseout', function (){
                ck.display('count');
            }, false);
        }

        function Cookie(name, value, domain, path, second){
            this.name = name;
            this.value = value;
            this.domain = domain;
            this.path = path;
            this.second = second;
            this.url = [];
            this.number = [];
            this.count = 0;
            this.element = null;
            this.urlList = '';
        }

        // Cookieの情報を取得
        Cookie.prototype.get = function (){
            var c = document.cookie;
            var v = c.split(';');
            var value = null;
            for (var i = 0; i < v.length; i ++ ){
                if (v[i].indexOf(this.name + '=') != -1){
                    value = v[i].substring(v[i].indexOf('=', this.name.length) + 1);
                    break;
                }
            }
            if (!value){
                return;
            }
            var v = value.split('&');
            for (var i = 0; i < v.length; i ++ ){
                var a = v[i].split('=');
                this.url[i] = decodeURIComponent(a[0]);
                this.number[i] = Number(a[1]);
                this.count += Number(a[1]);
            }
        }

        // Cookieを書き込む
        Cookie.prototype.set = function (){
            for (var i = 0; i < this.url.length; i ++ ){
                if (this.value){
                    this.value += '&';
                }
                this.value += encodeURIComponent(this.url[i]) + '=' + this.number[i];
            }
            var v = this.name + '=' + this.value + '; domain=' + this.domain +
                    '; path=' + this.path + '; max-age=' + this.second;
            document.cookie = v;
        }

        // 開いているページのURLをデータに追加する
        Cookie.prototype.add = function (URL){
            for (var i = 0; i < this.url.length; i ++ ){
                if (URL == this.url[i]){
                    this.number[i] ++ ;
                    URL = null;
                    break;
                }
            }
            if (URL){
                this.url[this.url.length] = URL;
                this.number[this.number.length] = 1;
            }
            this.count ++ ;
        }

        // Cookieのデータを表示する準備
        Cookie.prototype.makeElement = function (){
            var element = document.createElement('div');
            this.element = element;
            element.style.cssText = 'position: absolute; top: 10px; left: 5px; color: black;' +
                                    'background-color: white; font-size: 14px; z-index: 5;' +
                                    'height: auto; width: auto; padding: 1px;' +
                                    'border: solid 1px black;';
            document.body.appendChild(element);

            var ul = document.createElement('ul');
            ul.style.cssText = 'margin: 2px; padding: 0;';
            for (var i = 0; i < this.url.length; i ++ ){
                var li = document.createElement('li');
                li.style.cssText = 'font-size: 13px; margin: 0; padding: 1px;' +
                                    'text-align: left; list-style: none; line-height: 1.2;';
                li.innerText = this.number[i] + ' ' + this.url[i];
                ul.appendChild(li);
            }
            this.urlList = ul;
        }

        // Cookieのデータ表示
        Cookie.prototype.display = function (data){
            this.element.innerHTML = '';
            if (typeof this[data] != 'object'){
                this.element.innerHTML = this[data];
            } else {
                this.element.appendChild(this[data]);
            }
        }

        main();

    }, false);
}

時々 Cookieに保存したデータが消えてしまうことがある。データの URLに含まれる文字列に問題があるのか。それとも変なデータがあると判断されてサーバに消去されることなんかもあるのだろうか。

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/153-ef53b72a
Listed below are links to weblogs that reference
User JavaScriptの練習 - Cookieにデータを保存する(続) from Karafuto Blog

Home > user javascript > User JavaScriptの練習 - Cookieにデータを保存する(続)

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。