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 相关文章推荐
判断脚本加载是否完成的方法
May 26 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
js格式化时间小结
Nov 03 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
详解AngularJS ng-class样式切换
Jun 27 Javascript
es5 类与es6中class的区别小结
Nov 09 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超级全局变量数组小结
2012/10/04 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
深入理解js promise chain
2016/05/05 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
python字符类型的一些方法小结
2016/05/16 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
全球性的在线购物网站:Zapals
2017/03/22 全球购物
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
用Python写一个for循环的例子
2016/07/19 面试题
模具专业推荐信
2013/10/30 职场文书
成功的餐厅经营创业计划书
2014/01/15 职场文书
安全标兵事迹材料
2014/08/17 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
篮球拉拉队口号
2015/12/25 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书