JavaScript

文章目录

• • • JavaScript
    • 68 JavaScript Browser BOM
    • • 68.8 JavaScript Cookies
      • • 68.8.1 什么是 cookie？
        • 68.8.2 通过 JavaScript 创建 cookie
        • 68.8.3 通过 JavaScript 读取 cookie
        • 68.8.4 通过 JavaScript 改变 cookie
        • 68.8.5 通过 JavaScript 删除 cookie
        • 68.8.6 Cookie 字符串
        • 68.8.7 JavaScript Cookie 实例

68 JavaScript Browser BOM

68.8 JavaScript Cookies

Cookie 让您在网页中存储用户信息。

68.8.1 什么是 cookie？

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

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

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

• 当用户访问网页时，他的名字可以存储在 cookie 中。
• 下次用户访问该页面时，cookie 会“记住”他的名字。

Cookie 保存在名称值对中，如：

username = Bill Gates

当浏览器从服务器请求一个网页时，将属于该页的 cookie 添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息。

如果浏览器已关闭本地 cookie 支持，则以下实例均无法工作。

68.8.2 通过 JavaScript 创建 cookie

JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie。

创建 cookie：

document.cookie = "username=Bill Gates";

添加有效日期（UTC 时间）。默认情况下，在浏览器关闭时会删除 cookie：

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";

通过 path 参数可以告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页。

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

68.8.3 通过 JavaScript 读取 cookie

通过 JavaScript，可以这样读取 cookie：

var x = document.cookie;

document.cookie 会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2=value; cookie3=value;

68.8.4 通过 JavaScript 改变 cookie

通过使用 JavaScript，可以像创建 cookie 一样改变它：

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

旧 cookie 被覆盖。

68.8.5 通过 JavaScript 删除 cookie

删除 cookie 非常简单。

删除 cookie 时不必指定 cookie 值：

直接把 expires 参数设置为过去的日期即可：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

应该定义 cookie 路径以确保删除正确的 cookie。

如果不指定路径，一些浏览器不会让你删除 cookie。

68.8.6 Cookie 字符串

document.cookie 属性看起来像一个正常的文本字符串。但它不是。

即使你向 document.cookie 写一份完整的 cookie 字符串，当再次读取时，你只能看到它的名称-值对。

如果设置了新 cookie，则旧的 cookie 不会被覆盖。新的 Cookie 会被添加到 document.cookie，所以如果你读取 document.cookie，你得到的东西会像这样：

cookie1 = value; cookie2 = value;

如果想找到一个指定 cookie 的值，必须编写 JavaScript 函数来搜索 cookie 字符串中的 cookie 值。

68.8.7 JavaScript Cookie 实例

创建一个 cookie 来存储访问者的名称。

访客第一次到达网页时，会要求他填写姓名。然后将该名称存储在 cookie 中。

下次访客到达同一页时，他将收到一条欢迎消息。

【设置 cookie 的函数】

创建一个函数，将访问者的名字存储在 cookie 变量中：

function setCookie(cname, cvalue, exdays) {var d = new Date();d.setTime(d.getTime() + (exdays*24*60*60*1000));var expires = "expires="+ d.toUTCString();document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
} 

解释：cookie 的名字（cname），cookie 的值（cvalue），以及知道 cookie 过期的天数（exdays）。

通过把 cookie 名称、cookie 值和过期字符串相加，该函数就设置了 cookie。

【获取 cookie 的函数】

创建一个函数返回指定 cookie 的值：

function getCookie(cname) {var name = cname + "=";var decodedCookie = decodeURIComponent(document.cookie);var ca = decodedCookie.split(';');for(var i = 0; i 

function checkCookie() {var username = getCookie("username");if (username != "") {alert("Welcome again " + username);} else {username = prompt("Please enter your name:", "");if (username != "" && username != null) {setCookie("username", username, 365);}}
} 

function setCookie(cname, cvalue, exdays) {var d = new Date();d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));var expires = "expires="+d.toUTCString();document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}function getCookie(cname) {var name = cname + "=";var ca = document.cookie.split(';');for(var i = 0; i < ca.length; i++) {var c = ca[i];while (c.charAt(0) == ' ') {c = c.substring(1);}if (c.indexOf(name)  == 0) {return c.substring(name.length, c.length);}}return "";
}function checkCookie() {var user = getCookie("username");if (user != "") {alert("Welcome again " + user);} else {user = prompt("Please enter your name:", "");if (user != "" && user != null) {setCookie("username", user, 365);}}
}