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 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
自学实现angularjs依赖注入
Dec 20 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 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数据饼图效果实现代码
2011/11/23 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
33种Javascript 表格排序控件收集
2009/12/03 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
非常漂亮的js烟花效果
2020/03/10 Javascript
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
如何提高JDBC的性能
2013/04/30 面试题
do you have any Best Practice for testing
2016/06/04 面试题
计划生育证明格式范本
2014/09/12 职场文书
后进生评语大全
2015/01/04 职场文书
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL
Python学习之迭代器详解
2022/04/01 Python
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android