js操作cookie保存瀏覽記錄的方法
本文實(shí)例講述了js操作cookie保存瀏覽記錄的方法。分享給大家供大家參考,具體如下:
說(shuō)明:最近做了一個(gè)功能,記錄用戶(hù)瀏覽過(guò)的產(chǎn)品頁(yè)面。我的思路是,客戶(hù)每次進(jìn)入產(chǎn)品頁(yè)面,就自己調(diào)用JS把產(chǎn)品信息以json的形式保存到cookie里面。
瀏覽記錄的顯示是從cookie里讀出來(lái),然后解析成json,生成html元素。因?yàn)橛脩?hù)可能會(huì)同時(shí)打開(kāi)好幾個(gè)頁(yè)面,這幾個(gè)頁(yè)面上可能都有瀏覽記錄,為了使即使顯示瀏覽記錄,每秒中刷新一次。
要用到2個(gè)js文件,history.js,關(guān)鍵的聊天記錄保存和讀取代碼。json.js,對(duì)json進(jìn)行處理。
history.js
var addHistory=function(num,id){
stringCookie=getCookie('history');
var stringHistory=""!=stringCookie?stringCookie:"{history:[]}";
var json=new JSON(stringHistory);
var e="{num:"+num+",id:"+id+"}";
json['history'].push(e);//添加一個(gè)新的記錄
setCookie('history',json.toString(),30);
}
//顯示歷史記錄
var DisplayHistory=function(){
var p_ele=document.getElementById('history');
while (p_ele.firstChild) {
p_ele.removeChild(p_ele.firstChild);
}
var historyJSON=getCookie('history');
var json=new JSON(historyJSON);
var displayNum=6;
for(i=json['history'].length-1;i>0;i--){
addLi(json['history'][i]['num'],json['history'][i]['id'],"history");
displayNum--;
if(displayNum==0){break;}
}
}
//添加一個(gè)li元素
var addLi=function(num,id,pid){
var a=document.createElement('a');
var href='product.action?pid='+id;
a.setAttribute('href',href);
var t=document.createTextNode(num);
a.appendChild(t);
var li=document.createElement('li');
li.appendChild(a);
document.getElementById(pid).appendChild(li);
}
//添加cookie
var setCookie=function(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
cookieVal=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
// alert(cookieVal);
document.cookie=cookieVal;
}
//獲取cookie
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
// document.write(document.cookie.substring(c_start,c_end)+"<br>");
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
json.js
var JSON = function(sJSON){
this.objType = (typeof sJSON);
this.self = [];
(function(s,o){for(var i in o){o.hasOwnProperty(i)&&(s[i]=o[i],s.self[i]=o[i])};})(this,(this.objType=='string')?eval('0,'+sJSON):sJSON);
}
JSON.prototype = {
toString:function(){
return this.getString();
},
valueOf:function(){
return this.getString();
},
getString:function(){
var sA = [];
(function(o){
var oo = null;
sA.push('{');
for(var i in o){
if(o.hasOwnProperty(i) && i!='prototype'){
oo = o[i];
if(oo instanceof Array){
sA.push(i+':[');
for(var b in oo){
if(oo.hasOwnProperty(b) && b!='prototype'){
sA.push(oo[b]+',');
if(typeof oo[b]=='object') arguments.callee(oo[b]);
}
}
sA.push('],');
continue;
}else{
sA.push(i+':'+oo+',');
}
if(typeof oo=='object') arguments.callee(oo);
}
}
sA.push('},');
})(this.self);
return sA.slice(0).join('').replace(/
objectobject
,/ig,'').replace(/,\}/g,'}').replace(/,\]/g,']').slice(0,-1);
},
push:function(sName,sValue){
this.self[sName] = sValue;
this[sName] = sValue;
}
}
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
javascript將數(shù)組插入到另一個(gè)數(shù)組中的代碼
下面的代碼主要功能就是將數(shù)組arr2插入到數(shù)組arr1的index位置,需要的朋友可以參考下2013-01-01
JS實(shí)現(xiàn)圖片點(diǎn)擊后出現(xiàn)模態(tài)框效果
這篇文章主要介紹了JS實(shí)現(xiàn)圖片點(diǎn)擊后出現(xiàn)模態(tài)框效果,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-05-05
JavaScript使用表單元素驗(yàn)證表單的示例代碼
這篇文章主要介紹了JavaScript使用表單元素驗(yàn)證表單的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
javascript定義類(lèi)和類(lèi)的實(shí)現(xiàn)實(shí)例詳解
這篇文章主要介紹了javascript定義類(lèi)和類(lèi)的實(shí)現(xiàn),結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript類(lèi)的定義方式與相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
微信小程序小組件 基于Canvas實(shí)現(xiàn)直播點(diǎn)贊氣泡效果
這篇文章主要為大家詳細(xì)介紹了微信小程序小組件,基于Canvas實(shí)現(xiàn)直播點(diǎn)贊氣泡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02
JavaScript實(shí)現(xiàn)QQ聊天室功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)QQ聊天室功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07
Javascript實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)導(dǎo)航智能定位
本篇文章主要介紹了Javascript實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)導(dǎo)航智能定位,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05

