用js操作cookie保存浏览记录

说明：最近做了一个功能，记录用户浏览过的产品页面。我的思路是，客户每次进入产品页面，就自己调用JS把产品信息以json的形式保存到cookie里面。
浏览记录的显示是从cookie里读出来，然后解析成json，生成html元素。因为用户可能会同时打开好几个页面，这几个页面上可能都有浏览记录，为了使即使显示浏览记录，每秒中刷新一次。
要用到2个js文件，history.js，关键的聊天记录保存和读取代码。json.js，对json进行处理。

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); // 添加一个新的记录
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 ;}
}
}
// 添加一个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( / \[object object\], / ig, '' ).replace( / ,\} / g, ' } ' ).replace( / ,\] / g, ' ] ' ).slice( 0 , - 1 );
},
push: function (sName,sValue){
this .self[sName] = sValue;
this [sName] = sValue;
}
}

 

 

 

 

示例程序

< script type ="text/javascript" src ="../js/json.js" ></ script >
< script type ="text/javascript" src ="../js/history.js" ></ script >
< ul id ="history" >
</ ul >
< script >
addHistory( 15810782304 , 2 );
addHistory( 64654665 , 2 );
addHistory( 6843212 , 2 );
addHistory( 84984432521 , 2 );
setInterval( " DisplayHistory() " , 1000 );
</ script >

 

转载于:https://www.cnblogs.com/qinying/archive/2010/09/15/1826846.html