JavaScript中的document.cookie的使用

JavaScript中的document.cookie用于读取和修改浏览器中保存的cookie。

### 什么是cookie？

Cookie是一种小型的文本文件，由服务器发送给浏览器，并存储在本地计算机上。每次浏览器向同一服务器发送请求时，都会在http请求头中携带该cookie。服务器可以读取cookie并以此来识别用户、实现会话状态管理和个性化设置等功能。Cookie的使用场景范围非常广泛，例如记录用户登录状态、购物车信息、个性化推荐等。

### cookie的属性

每个cookie都有以下属性：

1.名称（name）：cookie的名称。

2.值（value）：cookie的值。

3.到期时间（expires）：指示浏览器该cookie的失效日期。如果没有设置，则默认为浏览器会话结束时失效。

4.路径（path）：指定哪些路径下的页面可以访问该cookie，默认为文档路径。

5.域（domain）：指定哪个域名可以访问该cookie，默认为设置cookie的服务器所在的域名。

6.安全标志（secure）：指示此cookie是否只能通过HTTPS连接传输。

### document.cookie的使用方法

1. 读取cookie

```javascript

const cookie = document.cookie;

console.log(cookie);

```

2. 设置cookie

```javascript

document.cookie = "name=value; expires=Wed, 09 Jun 2021 10:18:14 GMT; path=/; domain=example.com; secure";

```

以上代码依次设置了name、expires、path、domain和secure属性，以设置名为name的cookie，值为value。过期时间为2021年6月9日10:18:14，路径为根目录，仅可通过example.com的HTTPS连接访问。

3. 删除cookie

可以通过设置过期时间为以前的日期来删除cookie。

```javascript

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

```

以上代码将过期时间设置为Unix纪元时间0（即1970年1月1日），这会使浏览器删除名为name的cookie。

### 使用案例

#### 记录用户登录状态

```javascript

function setLoginCookie(username, token, expires) {

const cookieValue = `username=${username}; token=${token}; expires=${expires}; path=/;`;

document.cookie = cookieValue;

}

function getLoginCookie() {

const cookie = document.cookie;

const cookieArr = cookie.split("; ");

const [username, token] = cookieArr.map(item => item.split("=")[1]);

if (!username || !token) {

return null;

}

return {

username,

token

};

}

```

以上代码为设置和获取用户登录状态cookie的功能函数。首先，`setLoginCookie`函数会接受用户名、token和过期时间作为参数，将这些值保存为cookie并设置过期时间。然后，`getLoginCookie`函数会从cookie中读取用户名和token，如果两者都存在，则返回这些值，否则返回null。

#### 记录用户浏览历史

```javascript

function setHistoryCookie(url) {

const cookie = document.cookie;

const historyArr = cookie.split("; ").filter(item => item.startsWith("history="));

let newHistoryArr = [];

if (historyArr.length > 0) {

const historyStr = historyArr[0].split("=")[1];

const history = JSON.parse(historyStr);

newHistoryArr = [...history, url];

} else {

newHistoryArr = [url];

}

const newHistoryStr = JSON.stringify(newHistoryArr.slice(-10));

document.cookie = `history=${newHistoryStr}; path=/;`;

}

function getHistoryCookie() {

const cookie = document.cookie;

const historyArr = cookie.split("; ").filter(item => item.startsWith("history="));

if (historyArr.length > 0) {

const historyStr = historyArr[0].split("=")[1];

const history = JSON.parse(historyStr);

return history;

}

return [];

}

```

以上代码为设置和获取用户浏览历史cookie的功能函数。首先，`setHistoryCookie`函数接受一个URL作为参数，它会从cookie中读取历史记录，将新的URL添加到历史记录数组的末尾，并将整个历史记录数组设置为cookie。然后，`getHistoryCookie`函数从cookie中读取历史记录数组，并返回它。

需要注意的是，为了防止cookie过大导致性能问题，上述实现只会记录最新的10个浏览历史记录。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/