如何使用 Javascript 计算 1 次会话中访问的总页数

Question

我想要一个脚本来计算一个人在我网站的一次会话期间点击的页面数，并可能记录每个 URL。目的是在提交表单时，我想填充表单的两个隐藏字段，一个是页面，另一个是会话期间访问的 url 序列。

最初我想用 cookie 来做这个，在每个页面上，读取并获取 cookie 的当前值，将其存储在变量中，删除 cookie，然后重写 cookie( s) 带有附加变量。我打算使用普通 javascript.

然后我遇到了 HTML5 sessionStorage 并认为这可能是一个很好的解决方案。

这是我当前的代码，可以计算访问的页面。我担心的是，使用这种方法记录 url 可能会超出 cookie 的大小分配。

有没有更好的方法？我应该查看 HTML5 存储吗？

下面是我的工作代码。我对其进行编码，以便在每个页面上查找 ID 为 pageCount 的表单元素，如果存在，则用我的值填充它。

我还计划使用这个 - Request.Servervariables("HTTP_X_ORIGINAL_URL") - 来自经典 ASP 来构建访问过的页面列表并将这些页面存储在 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;
}
}

Answer 1

好的，下面的示例演示了如何使用 javascript

计算访问页面的计数

link 到 jsfiddle

https://jsfiddle.net/msdnq04c/5/

看看是否解决了问题？

<button onclick="visited();">visited per session</button>

<script>
window.onload = function() {
localStorage.setItem('count', parseInt(localStorage.getItem('count'), 10)+1);
};

function visited(){
alert(localStorage.getItem('count'));
}

</script>

这是在使用 Localstorage。

如果我们想对每个会话进行计数，我们可以使用 cookie 和每个 cookie，我们可以存储计数

Answer 2

我很想使用 sessionStorage 来完成这项任务，因为它可以存储比 cookie 更大的数量，而且您不必担心在任何阶段手动将其删除，因为它只会保留到session.

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 lang='en'>
    <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>

如何使用 Javascript 计算 1 次会话中访问的总页数

How to use Javascript to Count Total Pages Visited in 1 Session

html

javascript

cookies

session-storage