/**
* cookie : 存储数据,当用户访问了某个网页的时候,我们就可以通过cookie来像访问者的电脑存储数据
* 1:不同的浏览器存储的位置不同
* 2:cookie的存储时以域名形式进行区分
* 3:cookie数据可以设置名字
* 4:一个域名下存放的cookie有个数限制,不同的浏览器存放的个数不同
* 5:每个cookie存放的内容大小也是有限制的,不同的浏览器存放的大小不一样
*
* 注意:
* 1.我们通过document.cookie来获取当前网站下的cookie的时候,得到是一个字符串的值,包含了网站下所有的cookie,他会把所有的cookie通过一个分号加空格的形式串联起来
* 2.如果我们想长时间存放cookie
* document.cookie = '名称=值;expires+ 字符串格式的时间'
* 3.cookie默认是临时存储,当浏览器关闭进程的时候自动销毁
*
*/
//设置过期时间
var oDate = new Date();
oDate.setDate(oDate.getDate()+5); //设置五天后过期(对象类型)
oDate.toGMTString();//将过期时间设置为字符串类型
document.cookie = 'username = owl;expires=' + oDate.toGMTString();
// 在cookie存储一些特殊字符的时候可能会出现问题解决方法:内容最好编码后存放
encodeURI('');
decodeURI('');//读取解码
document.cookie = 'username ='+ encodeURI('owl\n你好haha') + ' owl;expires=' + oDate.toString();
alert(decodeURI(document.cookie));
//cookie方法
function setCookie(key,value,t){
var oDate = new Date() + t;
oDate.setDate(oDate.getDate() + t);
document.cookie = key + '=' + value + ';expires=' + oDate.toGMTString();
}
function getCookie(key){
var arr1 = document.cookie.split("; ");
for(var i=0; i<arr1.length;i++){
var arr2 = arr1[i].split('=');
if(arr2[0] == key){
return decodeURI(arr2[1]);
}
}
}
function removeCookie(key){
setCookie(key,'',-1);
}
转载延伸:
各浏览器之间对cookie的不同限制:
IE6.0 | IE7.0/8.0 | Opera | FF | Safari | Chrome | |
cookie个数 | 每个域为20个 | 每个域为50个 | 每个域为30个 | 每个域为50个 | 没有个数限制 | 每个域为53个 |
cookie大小 | 4095个字节 | 4095个字节 | 4096个字节 | 4097个字节 | 4097个字节 | 4097个字节 |
总之,在进行页面cookie操作的时候,应该尽量保证cookie个数小于20个,总大小 小于4KB
如果 cookie 的值比较小(即字符长度小)的话,则刷新页面或发起新的请求就不会有问题。
______________________________________________ 一个分隔线 ______________________________________________
回到初衷
——也就是设计 cookie 的目的。因为 HTTP 本身是无状态的会话,但是很多时需要一个有状态的会话,为了这个需求设计出来了 HTTP 状态管理机制(HTTP State Management Mechanism),即 cookie 。而一般的会话又不需要存储大量信息客户端(一般都为浏览器),所以在设计这个 cookie 的时候并没有考虑存储大数据量时的情况,而且实际使用时也很少需要存储大量数据到客户端。
假如需要存储大量数据到客户端怎么办呢?这里想到了以下几点:
- 限制用户使用最新版 chrome/FireFox/Internet Explorer 浏览器,如果对象不是特别大则可以使用 Web Storage。
- 在客户端用一个 token 标识用户在服务器端对应的状态,不过这个想控制好用户的状态,需要大量 AJAX 请求去服务器端更改用户状态,需要服务器牛X。实际用处也不大。
- 放弃用 Web 开发这个项目,使用 C/S 架构。