下面是详细讲解 JavaScript 实现 Cookie 操作的攻略。
什么是 Cookie
Cookie(中文翻译为“网页 Cookie”或者“浏览器 Cookie”)是网站为了辨别用户身份的一种标识,是存在用户本地终端上的数据。Cookie 是小型文本文件,由网站服务器发送给用户浏览器,浏览器会将其存储在本地,之后每次请求该网站时都会携带该 Cookie 信息,方便服务器进行区分识别。
JavaScript 操作 Cookie
获取 Cookie
可以通过 Document.cookie
属性获取当前网站设置的所有 Cookie。示例如下:
// 获取 Cookie 的方法
function getCookie(name) {
let cookies = document.cookie.split("; ");
for (let i = 0; i < cookies.length; i++) {
let [cookieKey, cookieValue] = cookies[i].split("=");
if (cookieKey === name) {
// 解码 cookie 值
return decodeURIComponent(cookieValue);
}
}
return null;
}
// 例:获取 Cookie 名称为 "username" 的值
let username = getCookie("username");
设置 Cookie
调用 Document.cookie
属性可设置新的 Cookie。设置过程需要指定 Cookie 名称、Cookie 值、过期时间、路径等参数。示例如下:
// 设置 Cookie 的方法
function setCookie(name, value, expires, path) {
let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
if (expires) {
let date = new Date();
date.setTime(date.getTime() + expires * 24 * 60 * 60 * 1000);
cookieText += `; expires=${date.toGMTString()}`;
}
if (path) {
cookieText += `; path=${path}`;
}
document.cookie = cookieText;
}
// 例:设置 Cookie,保存用户登录信息一周
setCookie("username", "JohnDoe", 7, "/");
删除 Cookie
通过设置 Cookie 的过期时间为过去的时间,即可实现删除 Cookie。示例如下:
// 删除 Cookie 的方法
function deleteCookie(name) {
setCookie(name, "", -1);
}
// 例:删除 Cookie 名称为 "username" 的 Cookie
deleteCookie("username");
示例说明
以下是两个对于操作 Cookie 的具体示例,供参考。
示例一:记住用户选择语言
假设现在有一个多语言的网站,用户可以通过下拉菜单选择自己喜欢的语言。网站需要记录用户的选择,以便下次用户访问时可以直接使用对应的语言,避免用户多次选择的麻烦。
当用户选择语言时,可通过设置 Cookie 保存其选择。下次用户访问网站时,可以通过读取该 Cookie 的值,自动设定对应的语言。示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Language Selection Demo</title>
</head>
<body>
<select id="languageSelect">
<option value="en">English</option>
<option value="zh">中文</option>
</select>
<script>
let languageSelect = document.querySelector("#languageSelect");
let selectedLang = getCookie("lang");
if (selectedLang) {
languageSelect.value = selectedLang;
}
languageSelect.addEventListener("change", function () {
let lang = this.value;
setCookie("lang", lang, 7, "/");
// 设置语言后,跳转到首页
window.location.href = "/index.html";
});
</script>
</body>
</html>
示例二:实现一个购物车
假设现在有一个网上商城,用户可以在其中添加自己喜欢的商品到购物车,最后一次性购买并结算。考虑实现一个购物车的功能,为每个用户记录所选商品及数量,下次访问时可以直接恢复用户所选内容。
当用户点击商品的“加入购物车”按钮时,可通过设置 Cookie 保存商品信息。对应的,当用户访问购物车页面时,可以通过读取该 Cookie 的值,自动显示用户所选内容。示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Shopping Cart Demo</title>
</head>
<body>
<h2>商品列表</h2>
<ul>
<li>
<span>商品 A - 价格:99 元</span>
<button class="add-button" data-id="A">加入购物车</button>
</li>
<li>
<span>商品 B - 价格:199 元</span>
<button class="add-button" data-id="B">加入购物车</button>
</li>
<li>
<span>商品 C - 价格:299 元</span>
<button class="add-button" data-id="C">加入购物车</button>
</li>
</ul>
<h2>购物车</h2>
<ul id="cartList"></ul>
<script>
let addButtonList = document.querySelectorAll(".add-button");
let cartList = document.querySelector("#cartList");
addButtonList.forEach(function (button) {
button.addEventListener("click", function () {
let productId = this.dataset.id;
let productAmount = getCookie(`product-${productId}`) || 0;
productAmount = parseInt(productAmount) + 1;
setCookie(`product-${productId}`, productAmount, 7, "/");
refreshCartList();
});
});
function refreshCartList() {
cartList.innerHTML = "";
let totalAmount = 0;
let cookies = document.cookie.split("; ");
for (let i = 0; i < cookies.length; i++) {
let [cookieKey, cookieValue] = cookies[i].split("=");
if (cookieKey.startsWith("product-")) {
let productId = cookieKey.slice(8);
let productName = `商品 ${productId}`;
let productPrice = 99 * productId;
let productAmount = parseInt(cookieValue);
let productTotalPrice = productPrice * productAmount;
let li = `
<li>
${productName}:单价 ${productPrice} 元,数量 ${productAmount} 条,总价 ${productTotalPrice} 元
</li>
`;
cartList.insertAdjacentHTML("beforeend", li);
totalAmount += productTotalPrice;
}
}
let li = `
<li>
总价:${totalAmount} 元
</li>
`;
cartList.insertAdjacentHTML("beforeend", li);
}
refreshCartList();
</script>
</body>
</html>
以上是针对 JavaScript 实现 Cookie 操作的详细介绍及两个具体示例。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript实现cookie的操作 - Python技术站