Cookie 是一种存储在用户浏览器上的小型文本文件,用于保存用户相关的信息,如登录状态、购物车内容等。Cookie 可以通过 JavaScript 进行动态的存储和删除操作。
以下是一个简单的示例,展示如何使用 JavaScript 动态存储和删除购物车中的商品信息。
function addToCart(productId, productName) {
let cart = getCart();
let item = { productId: productId, productName: productName };
// 检查商品是否已存在
let existingItem = cart.find(item => item.productId === productId);
if (existingItem) {
existingItem.quantity += 1;
} else {
item.quantity = 1;
cart.push(item);
}
// 更新 Cookie
setCookie('cart', JSON.stringify(cart), 7); // 设置过期时间为7天
}
function getCart() {
let cartStr = getCookie('cart');
return cartStr ? JSON.parse(cartStr) : [];
}
function setCookie(name, value, days) {
let expires = "";
if (days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
let nameEQ = name + "=";
let ca = document.cookie.split(';');
for(let i=0;i < ca.length;i++) {
let c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function removeFromCart(productId) {
let cart = getCart();
cart = cart.filter(item => item.productId !== productId);
// 更新 Cookie
setCookie('cart', JSON.stringify(cart), 7);
}
原因:浏览器对单个 Cookie 的大小有限制(通常为 4KB)。
解决方法:
localStorage
或 sessionStorage
。原因:出于安全考虑,浏览器不允许跨域访问 Cookie。
解决方法:
domain
属性。原因:Cookie 可能会被恶意网站利用,导致安全风险。
解决方法:
secure
属性,确保 Cookie 只在 HTTPS 连接中传输。HttpOnly
属性,防止 JavaScript 访问敏感 Cookie。通过以上方法,可以有效地管理和操作购物车中的商品信息,同时确保数据的安全性和可靠性。
领取专属 10元无门槛券
手把手带您无忧上云