cookie的用法，cookie的封装

cookie的概念
指某些网站为了辨别用户身份，进行session（会话）跟踪而存储在用户本地终端上的数据（通常经过加密）。以文本形式存在。
谷歌浏览器存储地址： C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\文件夹下的Cookies文件。
注：cookie 只有在服务器环境下才有用

禁用cookie：改变浏览器的cookie设置。如果浏览器完全禁止cookie功能的话，大多数网站的基本功能无法正常使用。
cookie的特点
1：chrome和safari没有对cookie的个数做限制，一般浏览器限制同一域名数量为50个。
2：cookie文件的总大小一般为4KB（同一个域名）。
3：只能使用文本文件。
4：读取有域名限制。域名 www.baidu.com www.taobao.com so.com
不可跨域读取,只能由来自写入cookie的同一域名的网页可进行读取。简单的讲就是,谁写的cookie,谁才有权利读取 (身份牌是我发你的,当然只有我能读取,你媳妇儿的手机自动连接了邻居老王家的wifi,你知道这意味着什么吗?)
5：时效限制。
每个cookie都有时效,最短的有效期是,会话级别:就是当浏览器关闭,那么cookie立即销毁。

cookie的使用

cookie的使用

添加cookie：document.cookie = “key=value”; // 一次写入一个键值对
document.cookie = 'test1=hello';
document.cookie = 'test2=world';
//在浏览器中查看一下现在的cookie是什么样子   打开控制台 点击application 就能看到cookies
//注意 document.cookie一次只能写入一个 Cookie，而且写入并不是覆盖，而是添加

读取cookie：document.cookie;

document.cookie // "test1=hello; test2=world"
上面代码从document.cookie一次性读出两个 Cookie，它们之间使用 分号空格 分隔。必须手动还原，才能取出每一个 Cookie 的值。

var cookies = document.cookie.split('; ');

for (var i = 0; i < cookies.length; i++) { 
      console.log(cookies[i]);
}
// foo=bar// baz=bar

修改cookie：document.cookie = “key=value”;  // 修改名为key的cookie值

document.cookie = 'test2=hah';
document.cookie // "test1=hello; test2=hah"

上面代码修改了test2对应的值

失效时间：expires ，没有设置失效时间的cookie 在浏览器关闭以后就会自动删除，如果设置了失效时候在未来的时间，就可以让cookie保存的时间长一点
设置失效时间：document.cookie = “key=value;expires=”+ oDate;

var oDate = new Date();
oDate.setDate(oDate.getDate() + 7);
document.cookie = “key=value;expires=”+ oDate;
//上面代码设置cookie的过期时间为7天以后

删除cookie：将cookie值覆盖为空，并将失效时间设置为过去的时间。

var oDate = new Date();
oDate.setDate(oDate.getDate() -7);
document.cookie = “test=;expires=”+ oDate;
//将cookie的过期时间设置为 7天前，test 这个cookie 就获取不到

重点来了呦！

cookie的封装

function setCookie(name,value,n){
	var oDate = new Date();
	oDate.setDate(oDate.getDate()+n);
	document.cookie = name+"="+value+";expires="+oDate;
}

function getCookie(name){
	var str = document.cookie;
	var arr = str.split("; ");
	for(var i = 0; i < arr.length; i++){
		//console.log(arr[i]);
		var newArr = arr[i].split("=");
		if(newArr[0]==name){
			return newArr[1];
		}
	}
}

function removeCookie(name){
	setCookie(name,1,-1);
}

cookie的用法，cookie的封装

cookie的封装

猜你喜欢