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 时间显示效果代码
Aug 23 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
javascript 实现map集合
Apr 03 Javascript
jquery使用经验小结
May 20 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 Javascript
12 种使用Vue 的最佳做法
Mar 30 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+javascript液晶时钟
2006/10/09 PHP
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
PHP程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
javascript 动态添加事件代码
2008/11/30 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
Vue2.0生命周期的理解
2018/08/20 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
python访问纯真IP数据库的代码
2011/05/19 Python
使用python分析git log日志示例
2014/02/27 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
python实现类之间的方法互相调用
2018/04/29 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
什么是GWT的Entry Point
2013/08/16 面试题
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
母亲追悼会答谢词
2014/01/27 职场文书
经典促销广告词大全
2014/03/19 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
董事长开业致辞
2015/07/29 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书