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效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
jQuery的一些特性和用法整理小结
Jan 13 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
网页广告中JS代码的信息监听示例
Apr 02 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 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
elgg 获取文件图标地址的方法
2010/03/20 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
浅谈javascript 面向对象编程
2009/10/28 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
PyQt5每天必学之工具提示功能
2018/04/19 Python
pytorch 数据集图片显示方法
2018/07/26 Python
python+opencv实现阈值分割
2018/12/26 Python
浅析python的Lambda表达式
2019/02/27 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
金属材料工程个人求职的自我评价
2013/12/04 职场文书
高级工程师岗位职责
2013/12/15 职场文书
GMP办公室主任岗位职责
2014/03/14 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
师德师风事迹材料
2014/12/20 职场文书
绵山导游词
2015/02/05 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
公司员工奖惩制度
2015/08/04 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers