JavaScript创建、读取和删除cookie

Cookie为Web应用程序保存用户相关信息提供了一种有用的方法。例如，当用户访问我们的网站时，可以使用Cookie来保存用户首选项或其他信息，以便当用户下次访问我们的网站时，应用程序可以检索以前保存的信息。

饼干到底是什么

Cookie是一小段文本信息，与用户请求和页面一起在Web服务器和浏览器之间传输。每当用户访问一个网站时，网络应用程序就可以读取Cookie中包含的信息。

Cookie的出现解决了保存用户信息的问题。例如

当用户访问网页时，用户名可以存储在cookie中。下次用户访问页面时，cookie会记住用户名。Cookie可以记住所有网页中的用户信息。它包含字符串形式的信息，并以键值对的形式存储，即以key=value的格式存储。通常，cookie都标有“；”分离。

用户名=黛西格林

饼干的缺点

Cookie可能被禁用。当用户非常注重个人隐私保护时，很可能会禁用浏览器的cookie功能；Cookie与浏览器相关。这意味着即使你访问同一个页面，保存在不同浏览器之间的cookie也不能相互访问；Cookie可能会被删除。因为每个cookie都是硬盘上的一个文件，很可能被用户删除；Cookie安全性不够高。所有cookie都是以纯文本的形式记录在文件中的，所以如果想保存用户名、密码等信息，最好提前加密。

库克作品

服务器以cookie的形式向访问者的浏览器发送一些数据。如果浏览器允许cookie被接受。它以纯文本记录的形式存储在访问者的硬盘上。

当访问者跳转到另一个页面时，浏览器会将相同的cookie发送到服务器进行检索。一旦检索到它，您的服务器将知道或记住之前存储的内容。

饼干的成分

Cookie在HTTP的头信息中，HTTP Set-Cookie的头格式如下：

Set-Cookie:名称=值；[过期=日期]；[path=path]；[domain=domain name]；[安全]；在HTTP代码中，一个具体的例子：

meta http-equiv=' set-cookie ' content=' cookieName=cookieValue；到期时间=01-12-2006 01:14:26 GMT；path=/'/从上面的格式可以看出，Cookie由以下几部分组成。

名称/值对

名称/值用分号分隔，最多20对cookie，每个网页最多一个cookie，值的长度不超过4K。值值最好用encodeURIComponent编码。

领域

域名也是Cookie的一部分。默认情况下，访问网页的用户的域名将存储在Cookie中。如果设置了此Cookie的域名值，这意味着域名上的所有服务器，而不仅仅是您正在访问的服务器，都可以访问此Cookie，并且通常不会这样做。设置域名的格式如下：domain=http://xyz.com

小路

设置哪些目录网页可以访问特定服务器的Cookie，并将路径的格式设置为：path=/movies

期满

设定饼干存活的时间。默认情况下，当用户关闭浏览器时，cookies将被自动删除。如果没有设置cookie过期的时间，cookie将在用户关闭浏览器时消失。如果设置了此项，Cookie的生存期可以延长。设置时间为JS中Date对象的GMT形式，格式如下：expires=date.toGMTString()

安全的

取值为真或假。如果为真，Cookie必须通过https发送。

JS Cookie

在JS中，可以通过使用Document对象的cookie属性来操作cookie。JS可以读取、创建、修改、删除当前网页的cookie，看具体操作。

创建Cookie

JS可以使用document.cookie属性来创建cookie，并且可以通过以下方式创建cookie:

document . cookie=' username=Daisy Green '；您还可以添加生效日期(世界协调时时间)。默认情况下，浏览器关闭时会删除cookie:

文件。cookie=' username=雏菊绿；到期时间=世界协调时2019年8月26日星期一12:00:00 ';通过小路参数，可以告诉浏览器甜饼干属于什么路径。默认情况下嘿，饼干属于当前页。

文件。cookie=' username=雏菊绿；到期时间=世界协调时2019年8月26日星期一12:00:00 ';路径=/';

读取饼干

通过JS，可以这样读取cookie:

var x=document.cookie

document.cookie会在一条字符串中返回所有饼干，比如：cookie1=值；烹饪2

事例：

超文本标记语言头部脚本类型='text/javascript '！-函数read CooKie(){ var all CooKies=document。饼干；文件。写('所有Cookies : '所有cookie)；//获取数组饼干射线=所有饼干。拆分('；'中的所有饼干对);//现在从这个数组中取出键值对(var I=0；我是库克李尔雷.split('=')[0]；价值=库克李尔雷[我].split('=')[1]；文档。写入('键是：“名称”，值是： '值)；} }/////脚本/标题正文表单名称='myform '操作=' p单击按钮查看结果：/p输入类型='按钮'值='获取Cookie ' onclick='读取Cookie()'//表单/正文/html运行：

改变甜饼干

通过使用JS，咱们可以像创建甜饼干一样改变它：

文件。cookie=' username=史蒂夫乔布斯；到期日=世界协调时2017年12月31日12:00:00;路径=/';

这样旧甜饼干会被覆盖。

事例：

超文本标记语言头部脚本类型='text/javascript '！-函数write CooKie(){ var now=new Date()；现在。SetMountain(现在。GetMountain；cookievalue=escape(文档。我的表格。顾客。值)“；”文件。cookie=' name=' cookievalue文件。cookie='过期='现在。tout cstring()“；”文件。写入('设置Cookies : ' '名称=' cookievalue ')；}/////脚本/标题正文表单名称='myform '操作输入名称：输入类型=“文本”名称='客户'/输入类型='按钮'值=' Set Cookie ' onclick=' WriteCookie()'//表单/正文/html运行：

删除甜饼干

删除甜饼干非常简单，不必指定甜饼干值：直接把期满参数设置为过去的日期即可：

document.cookie=' username=过期时间=世界协调时1970年一月01日星期四00:00:00;路径=/;'；

应该定义甜饼干路径以确保删除正确的饼干。如果不指定路径，有些浏览器不会让咱们删除饼干。

事例：

超文本标记语言头部脚本类型='text/javascript '！-函数write CooKie(){ var now=new Date()；现在。setmonth(现在。getmonth()-1)；cookievalue=escape(文档。我的表格。顾客。值)“；”文件。cookie=' name=' cookievalue文件。cookie='过期='现在。tout cstring()“；”文件。写入('设置Cookies : ' '名称=' cookievalue ')；}/////脚本/标题正文表单名称='myform '操作输入名称：输入类型=“文本”名称='客户'/输入类型='按钮'值=' Set Cookie ' onclick=' WriteCookie()'//表单/正文/html代码部署后可能存在的病菌没法实时知道，事后为了解决这些BUG，花了大量的时间进行原木调试，这边顺便给大家推荐一个好用的病菌监控工具Fundebug。