JavaScript-Cookie

Posted 2020-12-22 wyp-king

Cookie 是在计算机上存储在小的文本文件中的数据。

当 web 服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切。

Cookie 是为了解决“如何记住用户信息”而发明的：

　　1、当用户访问网页时，他的名字可以存储在 cookie 中。

　　2、下次用户访问该页面时，cookie 会“记住”他的名字。

 

cookie 是本地计算机的临时存储：

 1 var date=new Date();
 2 date.setFullYear(2022);
 3 document.cookie="a=3";
 4 document.cookie="a=3;expires="+date.toUTCString();
 5 console.log(document.cookie);//a=3
 6 
 7 var a=Number(document.cookie.split("=")[1]);
 8 a++;
 9 document.cookie="a="+a+";expires="+date.toUTCString();
10 console.log(document.cookie);//a=4

特性：

　　1、cookie必须运行在服务器的环境下（开启服务器）

　　2、cookie的容量: 5kb

　　3、cookie存储的数据类型: 字符串

　　4、cookie存放以域名形式区分的。

　　5、一个域名下存放的cookie的个数是有限制的，不同浏览器存放的个数不一样，cookie能存储的条目数为:50条。

　　6、如果想长时间存放一个cookie，同时需要设置一个过期时间

　　7、Cookie默认是临时存储的，当浏览器关闭时，自动销毁

 

缺点：

　　1、cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能； 

　　2、cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的； 

　　3、cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除； 

　　4、cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。 

 

使用Document对象的cookie属性可以用来设置与读取cookie：

1 document.cookie = “username=value”;

获取值：

使用document对象的cookie属性可以获得的cookie，准确点说应该是可以获得cookie文件的内容。

事实上cookie文件中存放的就是一个字符串，而这个字符串包含了当前网站目录下的所有cookie的名字和值。

因此，在获取指定的cookie时，还需要使用String对象中的方法才能获得需要的cookie值。

1 console.log(document.cookie)//username=value

cookie的生存期:

在默认情况下，cookie是临时存在的。在一个浏览器窗口打开时，可以设置cookie，只要该浏览器窗口没有关闭，cookie就一直有效，而一旦浏览器窗口关闭后，cookie也就随之消失。如果想要cookie在浏览器窗口之后还能继续使用，就需要为cookie设置一个生存期。所谓生存期也就是cookie的终止日期，在这个终止日期到达之前，浏览器都可以读取该cookie。一旦终止日期到达之后，该cookie将会从cookie文件中删除。

 

document.cookie = “名称=值；expires=” + 时间；（时间必须是一个字符串）

1 var d= new Date();
2 d.setHours(d.getHours() + (24 * 30)); //保存一个月
3 document.cookie = "visited=yes; expires=" + d.toUTCString();

存储多个内容：

 1 var obj={
 2             user:"xietian",
 3             age:30,
 4             sex:"男"
 5         }
 6 
 7         function setCookie(obj,date){
 8             for(var prop in obj){
 9                 document.cookie=prop+"="+obj[prop]+(date ? ";expires="+date.toUTCString() : "");
10             }
11         }
12         function setCookie1(key,value,date){
13                 document.cookie=key+"="+value+(date ? ";expires="+date.toUTCString() : "");
14         }
15         var date=new Date();
16         date.setFullYear(2022);
17         setCookie(obj,date);
18         
19 
20         // 获取cookie值
21         console.log(document.cookie);//user=xietian; age=30; sex=男