js操作cookie保存浏览记录的方法


Posted in Javascript onDecember 25, 2015

本文实例讲述了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(/
objectobject
,/ig,'').replace(/,\}/g,'}').replace(/,\]/g,']').slice(0,-1);
  },
  push:function(sName,sValue){
    this.self[sName] = sValue;
    this[sName] = sValue;
  }
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
js实现跨域的多种方法
Dec 25 #Javascript
jquery.cookie.js用法实例详解
Dec 25 #Javascript
理解javascript中try...catch...finally
Dec 25 #Javascript
javascript实现简单加载随机色方块
Dec 25 #Javascript
学习JavaScript鼠标响应事件
Dec 25 #Javascript
理解javascript中DOM事件
Dec 25 #Javascript
理解JavaScript中worker事件api
Dec 25 #Javascript
You might like
php生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
解析php中的escape函数
2013/06/29 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
js数字转换为float,取N位小数
2014/02/08 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
python代码实现ID3决策树算法
2017/12/20 Python
tensorflow获取变量维度信息
2018/03/10 Python
python Django 创建应用过程图示详解
2019/07/29 Python
移动通信行业实习自我鉴定
2013/09/28 职场文书
材料加工硕士生求职信
2013/10/10 职场文书
如何客观的进行自我评价
2013/12/17 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
法定授权委托证明书
2015/06/18 职场文书
信用卡工作证明范本
2015/06/19 职场文书
Docker官方工具docker-registry案例演示
2022/04/13 Servers
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android