Fatal编程技术网
  • javascript/
  • 如何使用Javascript计算一个会话中访问的总页面数

如何使用Javascript计算一个会话中访问的总页面数

javascript html cookies

如何使用Javascript计算一个会话中访问的总页面数,javascript,html,cookies,session-storage,Javascript,Html,Cookies,Session Storage,我想有一个脚本，将计数的网页数量，一个人在一次会议上点击我的网站，并可能记录每个网址以及。目的是在提交表单时，我希望填充表单的两个隐藏字段，一个是页面，另一个是会话期间访问的URL序列 最初，我想用cookie来实现这一点，在每一页上，读取并获取cookie的当前值，将其存储在变量中，删除cookie，然后用附加的变量重写cookie。我打算使用纯javascript 然后我遇到了HTML5会话存储，并认为这可能是一个很好的解决方案 这是我当前的代码，可以计算访问的页面数。我担心使用此方法记录U

我想有一个脚本，将计数的网页数量，一个人在一次会议上点击我的网站，并可能记录每个网址以及。目的是在提交表单时，我希望填充表单的两个隐藏字段，一个是页面，另一个是会话期间访问的URL序列

最初，我想用cookie来实现这一点，在每一页上，读取并获取cookie的当前值，将其存储在变量中，删除cookie，然后用附加的变量重写cookie。我打算使用纯javascript

然后我遇到了HTML5会话存储，并认为这可能是一个很好的解决方案

这是我当前的代码，可以计算访问的页面数。我担心使用此方法记录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;
}
}

var page_count=（document.cookie.match（/^（？：.*）？\s*pageCount\s*=\s*（[^；]+）（？：.*）$/）| |[，null]）[1]；
函数createCookie（名称、值、天数）{
如果（天）{
变量日期=新日期（）；
date.setTime（date.getTime（）+（天*24*60*60*1000））；
var expires=“；expires=“+date.togmString（）；
}
else var expires=“”；
document.cookie=name+“=”+value+expires+“path=/”；
}
函数readCookie（名称）{
变量nameEQ=name+“=”；
var ca=document.cookie.split（“；”）；
对于（变量i=0；i
好的，下面的示例演示如何使用javascript计算访问的页面数

链接到JSFIDLE

看一看，让我知道这是解决的目的

每次会话访问的

window.onload=函数（）{
localStorage.setItem（'count'，parseInt（localStorage.getItem（'count'），10）+1）；
};
函数访问（）{
警报（localStorage.getItem（'count'）；
}
我很想使用
会话存储来完成此任务，因为它可以存储比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 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>




会话存储：维护已访问URL的列表
span{颜色：绿色；显示：块；清除：两者；}
ul{颜色：蓝色}
常量hitcounter=函数（）{
const StoreFactory=function（name，type）{/*这通常位于单独的js文件中*/
"严格使用",；
const engine=！type | | type.toLowerCase（）==='local'？本地存储：会话存储；
常数集=函数（数据）{
setItem（名称，JSON.stringify（数据））；
};
const get=function（）{
返回存在（名称）？JSON.parse（engine.getItem（名称））：false；
};
const remove=函数（）{
发动机拆卸项目（名称）；
};
const exists=函数（）{
return engine.getItem（name）==null？false:true；
};
const create=函数（）{
如果（！exists（））集合（参数[0]| |{}）；
};
return Object.freeze({
设置
得到，
存在，
创造,，
去除
});
};
常量clickhandler=函数（e）{
oList.innerText=oSpan.innerText=''；
让json=oStore.get（）；
Object.keys（json.map）（key=>{
设li=document.createElement（'li'）；
li.innerText=key+''+json[key]
if（key！=“total”）oList.appendChild（li）
});
oSpan.innerText='总数为：'+json.total；
};
让oStore=newstorefactory（'url'，'sessionStorage'）；
create（）；
让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（数据）；
让oList=document.querySelector（'form>ul'）；
设oSpan=document.querySelector（'form>span'）；
让oBttn=document.querySelector（'form>input[type=“button”]”）；
oBttn.addEventListener（'click'，clickhandler）
}
document.addEventListener（'DOMContentLoaded'，hitcounter）；