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 maxlength文本字数限制插件
Apr 16 Javascript
Javascript 面向对象(三)接口代码
May 23 Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 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脚本的10个技巧(3)
2006/10/09 PHP
PHP 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python splitlines使用技巧
2008/09/06 Python
在Python的Django框架中创建和使用模版
2015/07/15 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
python开发之文件操作用法实例
2015/11/13 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
python脚本第一行如何写
2020/08/30 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
新员工欢迎词
2014/01/12 职场文书
大学新闻系自荐书
2014/05/31 职场文书
法律专业自荐信
2014/06/03 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
教师文明餐桌光盘行动倡议书
2015/04/28 职场文书
资金申请报告范文
2015/05/14 职场文书
字节飞书面试promise.all实现示例
2022/06/16 Javascript