JS中cookie的增删改查

JS中对cookie进行增删改查

以下个人总结，如有错误，请指出修正

cookie简单介绍

cookie是一段有大小限制的文本信息，由于浏览器厂商不同，各个浏览器大小不一致，其伴随着用户请求和浏览器与Web服务器之间传递当用户访问站点时，Web应用程序就可以读取cookie包含的信息，用来存储一些用户信息的临时数据

cookie大小限制

• Internet Explorer允许cookie包含4095个字节
• Opera允许cookie包含4096个字节
• Firefox和Safari和Chrome允许包含4097个字节
• cookie总大小都应小于4KB

cookie的缺点

• cookie是和浏览器相关的，所以不同浏览器进同一个域名地址，cookie不可以相互访问
• cookie可能会被删除，cookie是存储在硬盘上的文件，可能会被用户误删除
• cookie也可能会被用户手动禁用
• 由于cookie是以纯文本的形式存储的，所以包含密码相关的需要进行加密处理，否则不安全

cookie的工作方式

服务器端以cookie的形式向访问的浏览器发送一些数据，浏览器允许接受cookie则将数据以纯文本的形式存储到访问者的硬盘中，当访问者跳转的当前站点的另一个页面时，浏览器会将cookie发送至服务端进行读取，服务器就可以根据cookie存储的数据进行处理用户所需要的请求

cookie的组成(服务器端和浏览器端之间的cookie)

1. Name=Value 键值对
   每个网页最多有一个cookie，如果Value值中有汉字可以使用encodeURIComponent进行编码
2. Domain
   Domain域名是cookie的一部分，如果设置了其值代表域名上的所有服务器都可以访问这个cookie
3. path
   设置对于某特定的服务器那个网页可以访问cookie
4. Expires
   用来设置cookie的存活时间，默认用户关闭游览器则cookie自动删除，可以设置expires来延长cookie存放时间
5. Secure
   设置布尔类型的值 如何设置true则必须通过https发送cookie

JS中的cookie

在JS中，使用document.cookie属性来操作cookie，进行cookie的增删改查

创建cookie

• JS使用document.cookie属性创建cookie

	document.cookie = "username = fengyu";

• 通过path参数，告诉浏览器cookie属于什么路径，默认cookie属于当前页

	document.cookie = "username = fengyu; path=/";

• 通过expires设置cookie有效期

	document.cookie = `username = fengyu; expires = ${new Date(new Date().getTime()+1000)} `;

删除cookie

• 将cookie的有效时间设置为已经过去的时间即可

	document.cookie = "username = fengyu; expires=Tue, 01 Jan 2019 00:00:00 UTC; path=/";

改变cookie

• 改变和创建cookie语法一致，直接进行覆盖

	document.cookie = `username = crazy; expires = ${new Date(new Date().getTime()+1000)} `;

查询cookie

• 直接通过document.cookie属性查询(会返回一个字符串包含所有的cookie)

	var selectCookie = document.cookie