如何使用 Javascript 计算 1 Session 中访问的总页数
[英]How to use Javascript to Count Total Pages Visited in 1 Session
问题描述
我想要一个脚本来计算一个人在一个 session 到我的网站期间点击的页面数，并且可能还记录每个 URL。 目的是在提交表单时，我想填充表单的两个隐藏字段，一个带有页面，另一个带有在 session 期间访问的 url 序列。
最初我想用 cookies 来做这件事，在每个页面上，读取并获取 cookie 的当前值，将其存储在变量中，删除 cookie，并用附加的重写 cookie多变的。 我打算使用普通的 javascript。
然后我遇到了 HTML5 sessionStorage 并认为这可能是一个很好的解决方案。
这是我当前的代码，可用于计算访问的页面。 我担心使用这种方法记录 url 可能会超出 cookies 的大小分配。
有没有更好的办法？ 我应该改用 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;
}
}
2 个解决方案
解决方案1
2 已采纳 2019-11-21 12:28:56
我很想将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>
解决方案2
1 2019-11-21 12:19:51
好的，下面的示例演示了如何使用 javascript 计算访问页面的计数
链接到 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>
这是使用本地存储。
如果我们想按 session 计数，我们可以使用 cookies 和按 cookies，我们可以存储计数
如何使用 Graph API 获取用户的总好友数 [JavaScript]
[英]How to use Graph API to get user's total friend count [JavaScript]
使用JavaScript的SharePoint网站2010中访问量最大的页面
[英]Most visited pages in SharePoint site 2010 using JavaScript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.