亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何使用 Javascript 計算 1 個會話中訪問的總頁面數

如何使用 Javascript 計算 1 個會話中訪問的總頁面數

忽然笑 2022-01-07 10:38:57
我想要一個腳本來計算一個人在一次訪問我的網站期間點擊的頁面數，并可能記錄每個 URL。目的是在提交表單時，我想填充表單的兩個隱藏字段，一個帶有頁面，另一個帶有會話期間訪問的 url 序列。最初我想用 cookie 來做這件事，在每個頁面上，讀取并獲取 cookie 的當前值，將其存儲在一個變量中，刪除 cookie，并用附加的重寫 cookie多變的。我打算使用普通的javascript。然后我遇到了 HTML5 sessionStorage 并認為這可能是一個很好的解決方案。這是我當前的代碼，可用于計算訪問的頁面。我擔心使用這種方法記錄 url 可能會超出 cookie 的大小分配。有沒有更好的辦法？我應該改用 HTML5 存儲嗎？下面是我的工作代碼。我對它進行了編碼，以便在每個頁面上，它都會查找 ID 為 pageCount 的表單元素，如果存在，則使用我的值填充它。我還計劃使用來自經典 ASP 的 Request.Servervariables("HTTP_X_ORIGINAL_URL") 來構建訪問過的頁面列表并將其存儲在 cookie 或存儲中。var page_count =  (document.cookie.match(/^(?:.*;)?\s*pageCount\s*=\s*([^;]+)(?:.*)?$/)||[,null])[1];function createCookie(name,value,days) {    if (days) {        var date = new Date();        date.setTime(date.getTime()+(days*24*60*60*1000));        var expires = "; expires="+date.toGMTString();    }    else var expires = "";    document.cookie = name+"="+value+expires+"; path=/";}function readCookie(name) {    var nameEQ = name + "=";    var ca = document.cookie.split(';');    for(var i=0;i < ca.length;i++) {        var c = ca[i];        while (c.charAt(0)==' ') c = c.substring(1,c.length);        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);    }    return null;}function eraseCookie(name) {    createCookie(name,"",-1);}var element =  document.getElementById('pageCount');if(page_count == null){createCookie('pageCount','1',1);if (typeof(element) != 'undefined' && element != null){document.getElementById("pageCount").value = "1";}}else{var x = parseInt(readCookie('pageCount')) + 1;eraseCookie('pageCount');createCookie('pageCount',x,1);if (typeof(element) != 'undefined' && element != null){document.getElementById("pageCount").value = x;}}
查看完整描述

1 回答

?
DIEA

TA貢獻1820條經驗 獲得超2個贊

我很想將其sessionStorage用于此任務，因為它可以存儲比 cookie 更大的數量，并且您不必擔心在任何階段手動將其拆除，因為它只會保留在會話中。


const hitcounter=function(){

    const StoreFactory=function( name, type ){/* this would usually be in a separate js file */

        'use strict';

        const engine = !type || type.toLowerCase() === 'local' ? localStorage : sessionStorage;


        const set=function( data ){

            engine.setItem( name, JSON.stringify( data ) );

        };

        const get=function(){

            return exists( name ) ? JSON.parse( engine.getItem( name ) ) : false;

        };

        const remove=function(){

            engine.removeItem( name );

        };

        const exists=function(){

            return engine.getItem( name )==null ? false : true;

        };

        const create=function(){

            if( !exists() ) set( arguments[0] || {} );

        };

        return Object.freeze({

            set,

            get,

            exists,

            create,

            remove

        });

    }


    let oStore = new StoreFactory( 'urls', 'sessionStorage' );

        oStore.create();


    let data=oStore.get();

        data[ location.href ]=data.hasOwnProperty( location.href ) ? parseInt( data[ location.href ] ) + 1 : 1;

        data.total=data.hasOwnProperty('total') ? parseInt( data.total ) + 1 : 1;


    oStore.set( data );

}

document.addEventListener( 'DOMContentLoaded', hitcounter );

顯示存儲數據的表單示例


<!DOCTYPE html>

<html>

    <head>

        <meta charset='utf-8' />

        <title>sessionStorage: Maintain list of visited URLS</title>

        <style>

            span{color:green;display:block;clear:both;}

            ul{color:blue}


        </style>

        <script>

            const hitcounter=function(){

                const StoreFactory=function( name, type ){/* this would usually be in a separate js file */

                    'use strict';

                    const engine = !type || type.toLowerCase() === 'local' ? localStorage : sessionStorage;

                    const set=function( data ){

                        engine.setItem( name, JSON.stringify( data ) );

                    };

                    const get=function(){

                        return exists( name ) ? JSON.parse( engine.getItem( name ) ) : false;

                    };

                    const remove=function(){

                        engine.removeItem( name );

                    };

                    const exists=function(){

                        return engine.getItem( name )==null ? false : true;

                    };

                    const create=function(){

                        if( !exists() ) set( arguments[0] || {} );

                    };

                    return Object.freeze({

                        set,

                        get,

                        exists,

                        create,

                        remove

                    });

                };


                const clickhandler=function(e){

                    oList.innerText = oSpan.innerText = '';


                    let json=oStore.get();


                    Object.keys( json ).map( key =>{

                        let li=document.createElement('li');

                            li.innerText=key+' '+json[ key ]

                        if( key!='total' ) oList.appendChild( li )

                    });


                    oSpan.innerText='The total is: '+json.total;

                };




                let oStore = new StoreFactory( 'urls', 'sessionStorage' );

                    oStore.create();

                let data=oStore.get();

                    data[ location.href ]=data.hasOwnProperty( location.href ) ? parseInt( data[ location.href ] ) + 1 : 1;

                    data.total=data.hasOwnProperty('total') ? parseInt( data.total ) + 1 : 1;

                oStore.set( data );



                let oList=document.querySelector( 'form > ul' );

                let oSpan=document.querySelector( 'form > span' );

                let oBttn=document.querySelector( 'form > input[ type="button"]' );

                    oBttn.addEventListener('click', clickhandler )

            }

            document.addEventListener( 'DOMContentLoaded', hitcounter );

        </script>

    </head>

    <body>

        <form method='post'>

            <ul></ul>

            <span></span>

            <input type='button' value='Load data' />

        </form>

    </body>

</html>



查看完整回答
反對 回復 2022-01-07
  • 1 回答
  • 0 關注
  • 126 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號