• Javascript 通过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(){
    returnthis.getString();
    },
    valueOf:
    function(){
    returnthis.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>
  • 相关阅读:
    多个tomcat配置,解决冲突问题
    多态-重载和覆载
    静态成员、静态类和枚举
    重复使用类--继承和组合
    建立更可靠的OOP程序-类和成员的访问控制
    用ps画一个Gif的小房子(1)
    在h5页面上添加音乐播放
    使用Object类为实例定义方法和属性
    使用 prototype 定义方法和属性
    使用 this 关键字定义方法和属性
  • 原文地址:https://www.cnblogs.com/liangle/p/2512558.html
Copyright © 2020-2023  润新知