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 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
微信小程序删除处理详解
Aug 16 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 Javascript
react 项目中引入图片的几种方式
Jun 02 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正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
JavaScript日历实现代码
2010/09/12 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
js回调函数仿360开机
2019/12/26 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
python使用nntp读取新闻组内容的方法
2015/05/08 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
python实现银行实战系统
2020/02/26 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
Python 列表反转显示的四种方法
2020/11/16 Python
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
PHP面试题及答案二
2015/05/23 面试题
小学秋季运动会报道稿
2014/09/30 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
JAVA API 实用类 String详解
2021/10/05 Java/Android