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 相关文章推荐
IE8 原生JSON支持
Apr 13 Javascript
JavaScript中数组对象的那些自带方法介绍
Mar 12 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
JavaScript网页定位详解
Jan 13 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
ECMAScript6--解构
Mar 30 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
基于Vue实现微前端的示例代码
Apr 24 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连接Oracle数据库
2006/10/09 PHP
html中select语句读取mysql表中内容
2006/10/09 PHP
php学习笔记之 函数声明
2011/06/09 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
javascript 写类方式之九
2009/07/05 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
台湾森森购物网:U-mall
2017/10/16 全球购物
什么是类的返射机制
2016/02/06 面试题
亲子活动总结
2014/04/26 职场文书
暑期培训班策划方案
2014/08/26 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
初婚初育证明范本
2014/11/24 职场文书
民主评议党员个人总结
2015/02/13 职场文书
重阳节慰问信
2015/02/15 职场文书
中学推普周活动总结
2015/05/07 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书