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 相关文章推荐
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
VUEX-action可以修改state吗
Nov 19 Javascript
js实现无缝轮播图特效
May 09 Javascript
vue中路由跳转不计入history的操作
Sep 21 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中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
PHP写的求多项式导数的函数代码
2012/07/04 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
Eclipse + Python 的安装与配置流程
2013/03/05 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
python入门教程之识别验证码
2017/03/04 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
JNI的定义
2012/11/25 面试题
人力资源专业推荐信
2013/11/29 职场文书
前台接待岗位职责
2013/12/03 职场文书
表扬信格式
2014/01/12 职场文书
计算机维护专业推荐信
2014/02/27 职场文书
网络编辑求职信
2014/04/30 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
努力工作保证书
2015/02/28 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL