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 相关文章推荐
表单元素事件 (Form Element Events)
Jul 17 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
谈一谈javascript闭包
Jan 28 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
简述JS浏览器的三种弹窗
Jul 15 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 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查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
js实现简单的倒计时
2021/01/28 Javascript
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
Python3多线程基础知识点
2019/02/19 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
教师群众路线剖析材料
2014/09/29 职场文书
公司离职证明标准格式
2014/11/18 职场文书
面试感谢信范文
2015/01/22 职场文书
母亲节主题班会
2015/08/14 职场文书
谢师宴学生答谢词
2015/09/30 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang
如何通过一篇文章了解Python中的生成器
2022/04/02 Python