本文摘自PHP中文网,作者青灯夜游,侵删。
清除方法:不指定cookie值,把expires参数设置为过去的日期即可,语法“document.cookie="username=;expires=Thu,01 Jan 1970 00:00:00 UTC;path=/;";”。
本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。
Cookie 为 Web 应用程序保存用户相关信息提供了一种有用的方法。例如,当用户访问咱们的站点时,可以利用 Cookie 保存用户首选项或其他信息,这样,当用户下次再访问咱们的站点时,应用程序就可以检索以前保存的信息。
Cookie 是什么鬼
Cookie 是一小段文本信息,伴随着用户请求和页面在 Web 服务器和浏览器之间传递。用户每次访问站点时,Web 应用程序都可以读取 Cookie 包含的信息。
Cookie的出现是为了解决保存用户信息的问题。例如
当用户访问网页时,用户的名字可以存储在cookie中。
下次用户访问页面时,cookie会记住用户名。
Cookie 能在所有网页中记住用户的信息。它以字符串的形式包含信息,并键值对的形式保存的,即key=value的格式。各个cookie之间一般是以“;”分隔。
username = Daisy Green
Cookie 的组成
Cookie 在HTTP的头部Header信息中,HTTP Set-Cookie的Header格式如下:
1 2 |
|
在HTTP代码中一个具体的例子:
1 |
|
从上面的格式可以看出,Cookie由下面几部分组成。
Name/Value对
Name/Value由分号分隔,一个Cookie最多有20对,每个网页最多有一个Cookie,Value的长度不超过4K。对于Value值,最好用encodeURIComponent对其编码。
JS Cookie
在JS中,可以使用Document对象的cookie属性操作cookie。 JS 可以读取,创建,修改和删除当前网页的cookie,,来看看具体的骚操作。
创建 Cookie
JS可以使用document.cookie属性创建cookie,可以通过以下方式创建cookie:
1 |
|
还可以添加有效日期(UTC 时间)。默认情况下,在浏览器关闭时会删除 cookie:
document.cookie = "username=Daisy Green; expires=Mon, 26 Aug 2019 12:00:00 UTC";
通过 path 参数,可以告诉浏览器 cookie 属于什么路径。默认情况下,cookie 属于当前页。
1 |
|
读取 Cookie
通过 JS,可以这样读取 cookie:
1 |
|
document.cookie 会在一条字符串中返回所有 cookie,比如:cookie1=value; cookie2
事例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
|
运行:
改变 cookie
通过使用 JS,咱们可以像创建 cookie 一样改变它:
1 |
|
这样旧 cookie 会被覆盖。
相关阅读 >>
javascript中使用for...in 和object.keys()枚举对象属性的差异(附代码)
更多相关阅读请进入《javascript》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者