下面我将为您讲解设置和读取cookie的JavaScript代码完整攻略。
要设置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,我们可以使用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的值。
本文链接:http://task.lmcjl.com/news/10508.html