现在位置首页 / 前端开发 /正文

浏览器cookie及js处理

作者: IT小兵 | 2014年10月18日| 热度:℃ | 评论: |参与:

[图说浏览器的缓存原理及缓存方式说明(1)]一文中,说明浏览器缓存的机制。其中只是提到了cookie,今天说一下cookie的那点事。


1、使用cookie的业务背景

在ipad上访问某页面,页面顶部出现一个下载客户端的提示,点击关闭按钮后,提示信息消失,信息存入cookie,在cookie未过期之前,除非用户自己清除浏览器的cookie,否则此提示信息不再显示。像类似这样的需求非常常见,而网站上使用cookie技术也比比皆是。

2、Cookie介绍

  cookie的传递流程是用户在访问站点时,服务器端生成cookie,发送给浏览器端储存,当下次再访问时浏览器会将该网站的cookie发回给服务器端,服务器端根据cookie信息显示特定的内容。简而言之就是浏览器端会储存你在这个站点的一些信息,比如登录状态,用户ID,密码、浏览过的网页、停留的时间等信息,记录在cookie里,方便下次访问时发送给服务器端。因为HTTP协议是无状态的,即服务器不知道用户上一次做了什么,这严重阻碍了交互式web应用程序的实现。服务器可以设置或读取cookie中的信息,借此维护用户跟服务器会话中的状态。

  cookie的使用也很普遍,比如说在电商网站中,用户挑选了商品后,商品信息会记录在cookie里,然后在购物车页面读取cookie里的商品内容。再比如当用户登录一个网站时,如果用户勾选了下次自动登录,则发送登录请求时,服务器会发送包含登录凭据(用户名和密码被加密过)的cookie到用户的硬盘上,则下次登录时,浏览器会发送该cookie到服务器端验证,这次用户不必输入用户名和密码就可以直接登录了。另外网站还可以利用cookie跟踪统计用户访问该网站的习惯,比如什么时间访问,访问了哪些页面,访问了页面的哪块信息,在每个网页的停留时间等。利用这些信息,一方面是可以为用户提供个性化的服务,另一方面,也可以作为了解所有用户行为的工具,对于网站经营策略的改进有一定参考价值。

  cookie是保存在客户端中,分为内存cookie和硬盘cookie。内存cookie由浏览器维护,保存在内存中,浏览器关闭就失效。硬盘cookie的存在时间长,有个过期时间,除非手工清理或是到了过期时间,否则不会删除,将过期时间设置为0或负值,这样在关闭浏览器时,cookie同样失效。

  cookie的大小限制在4kb左右,所以存放的内容不是很多。cookie在网络中的应用也有一些弊端,比如会影响到用户的隐私,安全,以及根据用户的浏览记录投放垃圾广告,给用户造成困扰等。

 

3、 Cookie脚本设置

既然cookie在网站中也有不少用处,那如何设置cookie呢?下面简单介绍下利用JS如何设置cookie。

大体过程为:先创建一个Cookie对象(Object),然后利用控制函数对Cookie进行赋值、读取、写入等操作。

var __cookies,                      // cookie数据缓存
    __resp = /\s*\;\s*/,            // cookie分隔符
    __date = new Date(),            // cookie涉及的时间处理对象
    __currentms = __date.getTime(), // 当前时间值
    __milliseconds = 24*60*60*1000; // 一天的毫秒数值
/**
 * 取Cookie串
 * @param  {String} _key     KEY值
 * @param  {String} _value   指定的值
 * @param  {String} _domain  域
 * @param  {Number} _expires 过期时间偏移,单位天
 * @param  {String} _path    路径
 * @return {String}          Cookie串
 */
var __getCookieStr = function(_key,_value,){
    if (arguments[3])
        __date.setTime(__currentms+arguments[3]*__milliseconds);
    var _path = arguments[4]?('path='+arguments[4]+';'):'',
        _domain = arguments[2]?('domain='+arguments[2]+';'):'',
        _expires = arguments[3]?('expires='+__date.toGMTString()+';'):'';
    return _key+'='+_value+';'+_domain+_path+_expires;
};
// interface
/**
 * 根据KEY取cookie值
 * @param  {String} _key KEY值
 * @return {String}      指定的值
 */
_$getCookie = function(_key){
    return __cookies[_key]||'';
};
/**
 * 删除cookie
 * @param  {String} _key     要删除cookie的KEY值
 * @param  {String} _domain  域
 * @param  {String} _path    路径
 * @return {Void}
 */
_$delCookie = function(_key){
    document.cookie = __getCookieStr(_key,'',arguments[1],-100,arguments[2]);
    delete __cookies[_key];
};
/**
 * 添加cookie信息,如果KEY已存在则覆盖原先内容
 * @param  {String} _key     KEY值
 * @param  {String} _value   指定的值
 * @param  {String} _domain  域
 * @param  {Number} _expires 过期时间偏移,单位天
 * @param  {String} _path    路径
 * @return {Void}
 */
_$setCookie = function(_key,_value){
    document.cookie = __getCookieStr.apply(null,arguments);
    __cookies[_key] = _value;
};
/**
 * 刷新Cookie
 * @return {Void}
 */
_$refreshCookie = function(){
    __cookies = {};
    for(var i=0,_arr=document.cookie.split(__resp),l=_arr.length,_index;i<l;i++){
        _index = _arr[i].indexOf('=');
        __cookies[_arr[i].substring(0,_index)] = _arr[i].substr(_index+1);
    }
};
// init
_$refreshCookie();


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询