如何使用 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.