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 相关文章推荐
JavaScript Chart 插件整理
Jun 18 Javascript
jquery实现奇偶行赋值不同css值
Feb 17 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
Vue.js学习笔记之 helloworld
Aug 14 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
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
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
python将秒数转化为时间格式的实例
2018/09/16 Python
django Admin文档生成器使用详解
2019/07/22 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
python 用struct模块解决黏包问题
2020/11/07 Python
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
HSRP的含义以及如何工作
2014/09/10 面试题
英语系本科生个人求职信
2013/09/21 职场文书
师范毕业生自荐信
2013/10/17 职场文书
初二物理教学反思
2014/01/29 职场文书
会计电算化大学生职业规划书
2014/02/05 职场文书
手术室护士长竞聘书
2014/03/31 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
助学贷款贫困证明
2014/09/23 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
工地食品安全责任书
2015/05/09 职场文书