用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
>