html 如何使用cookies

HTML 本身并不直接支持 Cookies,但是可以通过 JavaScript 来实现对 Cookies 的操作,Cookies 是浏览器用来存储用户本地数据的一种方式,通常用于保存用户的登录状态、购物车信息等,在 HTML 页面中,我们可以通过 JavaScript 来创建、读取、修改和删除 Cookies。

html 如何使用cookies
(图片来源网络,侵删)

以下是如何使用 JavaScript 操作 Cookies 的详细教程:

1、创建 Cookies

要创建一个 Cookie,我们需要使用 document.cookie 属性,这个属性允许我们设置或读取当前网页的 Cookie,要创建一个名为 "username" 的 Cookie,其值为 "John Doe",可以使用以下代码:

document.cookie = "username=John Doe";

注意,Cookie 的属性值必须以分号(;)和空格()结尾,我们还可以在 Cookie 的属性值中添加其他属性,expires(过期时间)、path(路径)和 domain(域名),我们可以将上述 Cookie 设置为只在当前目录及其子目录下有效,并在一天后过期:

document.cookie = "username=John Doe; expires=; path=/; domain=example.com";

2、读取 Cookies

要读取一个 Cookie,我们可以使用 document.cookie 属性,要获取名为 "username" 的 Cookie 的值,可以使用以下代码:

var cookieValue = document.cookie.replace(/(?:(?:^|.*;s*)usernames*=s*([^;]*).*$)|^.*$/, "$1");
console.log(cookieValue); // 输出 "John Doe"

在这个例子中,我们使用了正则表达式来匹配名为 "username" 的 Cookie 的值,如果找到了匹配项,replace() 方法会将其替换为第一个捕获组的内容(即 Cookie 的值),如果没有找到匹配项,replace() 方法会返回原始的 document.cookie 属性值。

3、修改 Cookies

要修改一个 Cookie,我们可以先删除原有的 Cookie,然后创建一个新的 Cookie,要将名为 "username" 的 Cookie 的值从 "John Doe" 修改为 "Jane Doe",可以使用以下代码:

// 删除原有的 Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=example.com";
// 创建新的 Cookie
document.cookie = "username=Jane Doe; path=/; domain=example.com";

4、删除 Cookies

要删除一个 Cookie,我们可以将其过期时间设置为一个过去的时间点,要删除名为 "username" 的 Cookie,可以使用以下代码:

// 设置 Cookie 的过期时间为过去的时间点
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=example.com";

5、遍历 Cookies

要遍历一个网站的所有 Cookies,我们可以使用 document.cookie 属性,以下是一个遍历所有 Cookies 并打印其名称和值的示例:

var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i];
    var cookieName = cookie.substring(0, cookie.indexOf("="));
    var cookieValue = cookie.substring(cookie.indexOf("=") + 1);
    console.log("Cookie Name: " + cookieName + ", Cookie Value: " + cookieValue);
}

在这个例子中,我们首先使用 split() 方法将 document.cookie 属性按分号(;)分割成一个数组,我们遍历这个数组,并使用 substring() 方法提取每个 Cookie 的名称和值,我们使用 console.log() 方法打印出每个 Cookie 的名称和值。

原创文章,作者:未希,如若转载,请注明出处:https://www.kdun.com/ask/417431.html

本网站发布或转载的文章及图片均来自网络,其原创性以及文中表达的观点和判断不代表本网站。如有问题,请联系客服处理。

(0)
未希新媒体运营
上一篇 2024-04-01
下一篇 2024-04-01

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

产品购买 QQ咨询 微信咨询 SEO优化
分享本页
返回顶部
云产品限时秒杀。精选云产品高防服务器,20M大带宽限量抢购 >>点击进入