44. JS cookie的设置、获取和删除(非常详细) |
您所在的位置:网站首页 › cookie可以手动删除 › 44. JS cookie的设置、获取和删除(非常详细) |
1. 前言
在编程领域,Cookie 代表一种小型的文本文件,可以让开发人员在用户计算机上存储少量的数据(大约 4kb),来记录用户的某些信息,例如用户身份、喜好等,当用户下次访问网站时,网站可以通过检索这些信息来为用户展示个性化页面。另外,一些电商网站的购物车也用到了 Cookie 技术。 在 HTTPS 协议还未诞生之前,Web 浏览器和服务器之间需要通过 HTTP 协议进行通信,HTTP 协议是一种无状态协议,当服务器与浏览器之间完成一次交互(浏览器向服务器发送请求,服务器做出响应)后,链接会被关闭,服务器就会忘记浏览器的一切。Cookie 就是为了让服务器能够记住浏览器而发明的。 当使用浏览器访问某个页面时,可以将一些浏览器的信息会存储在 Cookie 中,浏览器每次向服务器发送请求时,Cookie 会作为请求的一部分一同发送给服务器,这样服务器就能通过 Cookie 中的信息来记住浏览器了。 提示:Cookie 由若干个键/值对组成(例如key1=value1;key2=value2),一个 Cookie 最大可以存储 4kb 的数据,超过长度的 Cookie 将被忽略。您也可以在浏览器端禁用 Cookie,这样一些借助 Cookie 才能完成的操作将无法进行。另外,不要在 Cookie 中存储账号、密码等敏感信息。 Cookie 最初是为 PHP、ASP 等服务器端脚本语言设计的,但是我们也可以使用 JavaScript 来操作,只是操作起来比较复杂,下面就来简单介绍一下如何使用 JavaScript 来操作 Cookie。 2. JS 设置 Cookie在 JavaScript 中,您可以通过document.cookie属性来创建、读取、修改和删除 Cookie 信息。 创建(设置)新的 Cookie 信息,需要以name=value形式的字符串来定义新的 Cookie 信息,如下例所示: document.cookie = "url=http://c.biancheng.net/";Cookie 数据中不能包含分号、逗号或空格,因此在将数据存储到 Cookie 之前,可以使用 JavaScript 内置的 encodeURIComponent() 函数对数据进行编码。在读取 Cookie 时,使用对应的 decodeURIComponent() 函数来解析 Cookie 数据,如下例所示: document.cookie = "url=" + encodeURIComponent("http://c.biancheng.net/");注意:运行上面的代码,您会发现 Cookie 并没有创建,这是因为 Cookie 是用来与服务器进行交互的,所以要成功创建 Cookie 需要借助服务器环境。您可以阅读《PHP开发环境》一节,来搭建一个简单的开发环境,并将我们定义的 HTML 文件移动到应用目录(默认为安装目录的 apache2/htdocs 目录下)中,然后访问我们的 HTML 文件。 Cookie 并不会一直存在,默认情况下,Cookie 的生命周期就是浏览器的会话周期,即用户关闭浏览器后,Cookie 就会失效。 如果想要延长 Cookie 的生命周期,您可以使用 max-age 属性来指定 Cookie 可以存在的时间(单位为秒),默认为 -1,即关闭浏览器后失效。 如果将 max-age 设置为一个负数,则表示该 Cookie 为临时 Cookie,关闭浏览器后就会失效。如果设置为 0,则表示删除该 Cookie。若要将 Cookie 的生命周期设置为 30 天的话,则可以像下面这样: document.cookie = "url=http://c.biancheng.net/; max-age=" + 30*24*60*60;此外,您也可以使用 expires 属性来指定 Cookie 失效的具体日期(GMT/UTC 格式),如下所示: document.cookie = "url=http://c.biancheng.net/; expires=Sun, 31 Dec 2017 12:00:00 UTC;";提示:通过为 Cookie 设置生命周期,不仅可以延长 Cookie 存在的时间,还可以让 Cookie 提前失效。 默认情况下,Cookie 可用于同一域名下的所有网页,但如果您为 Cookie 设置了 path 属性,那么 Cookie 就只能在该域名指定路径下的网页中使用,例如网站的域名为 c.biancheng.net,若 path 属性设置为/,则表示 Cookie 可在域名下的所有网页中使用,若 path 属性设置为/javascript/,则 Cookie 只可在 http://c.biancheng.net/javascript/ 下的网页中使用,示例代码如下: document.cookie = "url=http://c.biancheng.net/; path=/";如果您希望 Cookie 可以在指定域名下的子域名中使用,则可以通过 domain 属性来设置,默认情况下,Cookie 仅可在设置它的域名下使用,示例代码如下: document.cookie = "url=http://c.biancheng.net/; path=/; domain=.biancheng.net";若将 domain 属性设置为.biancheng.net,则表示 Cookie 可在所有以biancheng.net结尾的域名下使用,注意,domain 属性值的第一个字符.不能省略。 此外,Cookie 中还有一个属性 secure,该属性只有一个属性名,没有属性值,如果设置了该属性,则表示 Cookie 将仅通过 HTTPS 协议传输,示例代码如下: document.cookie = "url=http://c.biancheng.net/; path=/; domain=.biancheng.net; secure";为了方便设置 Cookie,我们可以定义一个函数,如下所示: /** * 添加 Cookie * @param {[string]} name [Cookie 的名称] * @param {[string]} value [Cookie 的值] * @param {[number]} daysToLive [Cookie 的过期时间] */ function setCookie(name, value, daysToLive) { // 对 cookie 值进行编码以转义其中的分号、逗号和空格 var cookie = name + "=" + encodeURIComponent(value); if(typeof daysToLive === "number") { /* 设置 max-age 属性 */ cookie += "; max-age=" + (daysToLive*24*60*60); } document.cookie = cookie; } 3. JS 获取 Cookie读取(获取) Cookie 同样使用document.cookie即可,该属性会返回一个字符串,字符串中包含除 max-age、expires、path 和 domain 等属性之外的所有 Cookie 信息,例如url=http://c.biancheng.net/; course=JavaScript。为了获取单个 Cookie 的值,我们可以通过 split() 函数将包含 Cookie 信息的字符串拆分为数组,然后再获取某个 Cookie 的值,示例代码如下: document.cookie = "url=http://c.biancheng.net/; max-age=" + 30*24*60*60; document.cookie = "course=JavaScript"; document.cookie = "title=cookie"; function getCookie(name) { // 拆分 cookie 字符串 var cookieArr = document.cookie.split(";"); // 循环遍历数组元素 for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); /* 删除 cookie 名称开头的空白并将其与给定字符串进行比较 */ if(name == cookiePair[0].trim()) { // 解码cookie值并返回 return decodeURIComponent(cookiePair[1]); } } // 如果未找到,则返回null return null; } document.write("url = " + getCookie("url") + ""); // 输出:url = http://c.biancheng.net/ document.write("course = " + getCookie("course") + ""); // 输出:course = JavaScript document.write("title = " + getCookie("title")); // 输出:title = cookie 4. JS 修改或更新 Cookie 的值修改或更新 Cookie 值的唯一方法就是创建一个同名的 Cookie,来替换要修改的 Cookie。注意,若要修改的 Cookie 定义了 path 属性,在修改该属性时也要定义相同的 path 属性,否则会创建一个新的 Cookie。示例代码如下: // 创建一个 Cookie document.cookie = "url=http://c.biancheng.net/; path=/; max-age=" + 30*24*60*60; // 修改这个 Cookie document.cookie = "url=http://c.biancheng.net/javascript/; path=/; max-age=" + 365*24*60*60;提示:若 path 属性为/,在修改时也可以省略 path 属性。 5. JS 删除 Cookie删除 Cookie 与修改 Cookie 类似,只需要重新将 Cookie 的值设置为空,并将 expires 属性设置为一个过去的日期即可,如下例所示: // 创建一个 Cookie document.cookie = "url=http://c.biancheng.net/; path=/; max-age=" + 30*24*60*60; // 删除这个 Cookie document.cookie = "url=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";另外,也可通过将 max-age 属性设置为 0 来删除 Cookie。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |