欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  技术分享

JS浏览器Cookie面向对象例子_Cookie通过JS命名空间封装实例

程序员文章站 2022-03-01 14:59:50
...

1. Cookie介绍

cookie的传递流程是用户在访问站点时、服务器端生成cookie、发送给浏览器端储存

当下次再访问时浏览器会将该网站的cookie发回给服务器端、服务器端根据cookie信息显示特定的内容

简而言之就是浏览器端会储存你在这个站点的一些信息、比如登录状态、用户ID、密码、浏览过的网页

停留的时间等信息、记录在cookie里、方便下次访问时发送给服务器端、因为HTTP协议是无状态的

即服务器不知道用户上一次做了什么、这严重阻碍了交互式web应用程序的实现

服务器可以设置或读取cookie中的信息、借此维护用户跟服务器会话中的状态


cookie的使用也很普遍、比如说在电商网站中、用户挑选了商品后、商品信息会记录在cookie里

然后在购物车页面读取cookie里的商品内容、再比如当用户登录一个网站时、如果用户勾选了下次自动登录

则发送登录请求时、服务器会发送包含登录凭据(用户名和密码被加密过)的cookie到用户的硬盘上

则下次登录时、浏览器会发送该cookie到服务器端验证、这次用户不必输入用户名和密码就可以直接登录了

另外网站还可以利用cookie跟踪统计用户访问该网站的习惯、比如什么时间访问、访问了哪些页面

访问了页面的哪块信息、在每个网页的停留时间等、利用这些信息、一方面是可以为用户提供个性化的服务

另一方面、也可以作为了解所有用户行为的工具、对于网站经营策略的改进有一定参考价值


cookie的大小限制在4kb左右、所以存放的内容不是很多、cookie在网络中的应用也有一些弊端

比如会影响到用户的隐私、安全、以及根据用户的浏览记录投放垃圾广告、给用户造成困扰等


2. 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();


以上是利用JS的命名空间封装的一个Cookie操作类、希望对大家有帮助