设置和读取cookie的javascript代码

下面我将为您讲解设置和读取cookie的JavaScript代码完整攻略。

下面我将为您讲解设置和读取cookie的JavaScript代码完整攻略。

设置Cookie

要设置Cookie，我们可以使用document.cookie属性。该属性包含所有当前页面的Cookie。我们可以通过向document.cookie添加字符串来添加Cookie。

以下是添加单个Cookie的代码：

// 设置一个名为 username 的 cookie，过期时间是24小时
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";

在这个例子中，我们设置了名为 "username" 的Cookie，并将其值设置为 "John Doe"。该Cookie将在2022年12月18日12:00:00 GMT之前过期。

此外，我们还使用了path属性，该属性指定了这个Cookie所属的页面路径。如果没有指定路径，默认路径是当前路径。

我们也可以在同一页面中设置多个Cookie：

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";
document.cookie = "email=johndoe@gmail.com; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";

读取Cookie

要读取Cookie，我们可以使用document.cookie属性。此属性将返回所有当前页面的Cookie。我们可以使用正则表达式或split()函数将Cookie字符串转换为对象。

以下是读取单个Cookie的代码：

// 读取名为 username 的cookie
const cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)username\s*\=\s*([^;]*).*$)|^.*$/, "$1");

在这个例子中，我们使用正则表达式从document.cookie字符串中获取名为 "username" 的Cookie值。我们将其存储在变量 cookieValue 中。

如果我们想要读取所有Cookie的值，可以使用以下代码：

// 获取所有Cookie的名称和值
const cookies = document.cookie.split(';').map(cookie => cookie.split('=')).reduce((accumulator, [key, value]) => ({ ...accumulator, [key.trim()]: value }), {});

在这个例子中，我们首先使用split()函数将document.cookie字符串转换为一个数组，该数组包含每个Cookie的名称和值。然后，我们使用map()函数将每个Cookie的名称和值转换为一个数组。接下来，我们使用reduce()函数将这些数组转换为一个对象，该对象包含每个Cookie的名称和值。最后，我们将这个对象存储在变量cookies中。

总之，设置和读取Cookie都是非常简单的操作，只需要使用document.cookie属性即可。同时，我们也可以使用正则表达式或split()函数将Cookie字符串转换为对象，以方便读取Cookie的值。