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实例教程(19) 使用HoTMetal(5)
Dec 23 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 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
sony ICF-2010 拆解与改装
2021/03/02 无线电
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
求得div 下 img的src地址的js代码
2007/02/28 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
竞争上岗演讲稿
2014/01/05 职场文书
忠诚教育心得体会
2014/09/03 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
天坛导游词
2015/02/02 职场文书
2014年个人总结范文
2015/03/09 职场文书
消防安全月活动总结
2015/05/08 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
python实现Nao机器人的单目测距
2021/09/04 Python