【JavaScript】Cookie的使用

文章目录

---

Cookie

一、概述

Cookie是会话技术的一种，主要用于将会话过程产生的数据保存到客户端（浏览器），从而使客户端每次和服务端之间可以更好的进行交互。

我们通过一个生活中的例子来理解下Cookie的概念。在生活中，大家应该都有接触过会员卡，比如理发店、超市等等。我们办理会员卡后，店家会给我们一张卡片，以后每次来消费时，只需出示这张卡片，就可以获取到你的余额、积分、消费记录等信息，然后基于上面的信息来进行折扣的计算、积分的累加，余额的扣减等操作。

在Web应用中，Cookie的功能就类似于上面的例子中的会员卡，第一次请求时，会创建一个Cookie，当用户再次访问服务器时，就会携带上Cookie（会员卡），服务端也会根据处理结果，将一些信息放到Cookie中，以保存在客户端。

​​返回顶部​​

---

二、作用

1. 保存在客户端 — 浏览器端
2. 相当于浏览器提供的一小块存储空间
3. 可以设置禁用
4. 键值对形式存储
5. 可以设置过期时间
   会话cookie(临时cookie) 关闭窗口就删除
   永久cookie：设置有效期
6. 适用于保存一些数据量较小的数据，比如：账户密码（加密过的）、状态信息、离线部分信息、后台传输小批量数据
7. 不建议在其中放置大量的数据

​​返回顶部​​

---

三、官方文档

3.1 通过 JavaScript 创建 cookie

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

通过 JavaScript，可以这样创建 cookie：

document.cookie = "username=Bill Gates";

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

document.cookie = "username=John Doe; 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=/";

​​返回顶部​​

---

3.2 通过 JavaScript 读取 cookie

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

var x = document.cookie;

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

​​返回顶部​​

---

3.3 通过 JavaScript 改变 cookie

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

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

旧 cookie 被覆盖。

​​返回顶部​​

---

3.4 通过 JavaScript 删除 cookie

删除 cookie 非常简单。

删除 cookie 时不必指定 cookie 值：

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

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

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

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

​​返回顶部​​

---

3.5 Cookie 字符串

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

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

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

cookie1 = value; cookie2 = value;

显示所有 cookie 创建 cookie 1 创建 cookie 2 删除 cookie 1 删除 cookie 2

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

​​返回顶部​​

---

四、简单使用

4.1 添加

// 添加cookie
document.cookie = "key1" + "=" + "123456" + ";";
document.cookie = "key2" + "=" + "1234567" + ";";
document.cookie = "key3" + "=" + "12345678" + ";";

​​返回顶部​​

---

4.2 查询

var cs = document.cookie.split(";");
// 方式一
for (i = 0; i < cs.length; i++) {
    let item = cs[i].trim();
    if (item.indexOf("key1") == 0) {
        alert("键的值是：" + item.substring("key1".length + 1, item.length));
    }
}
// 方式二
//  * 对item再切分，按照key去判断
//  缺点：如果value被清除了，会出现数组下标越界
// for(i=0;i<cs.length;i++){
//  let item = cs[i].split("=");
//  if (item[0].indexOf("key1") == 0){
//      alert("键的值是："+item[1]);
//  }
// }
document.write(document.cookie)

​​返回顶部​​

---

4.3 设置过期时间

// 设置过期时间
// 20s 按日计算：24*60*60*1000
var d = new Date();
d.setTime(d.getTime() + (20 * 1000));
let expires = "expires=" + d.toGMTString();
document.cookie = "key4" + "=" + "123456789" + ";" + expires;
// 官方写法：不使用trim(),避免了值部分的空格数据丢失
function getCookie(cname) {
    var name = cname + "=";
    // decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码
    var decodedCookie = decodeURIComponent(document.cookie);
    // 拆分
    var ca = decodedCookie.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 "";
}
// 控制台输出
console.log("对应键的值是：" + getCookie("key4"));

---