Javascript 对cookie操作详解及实例
什么是cookie
Cookie 是一种存储在用户计算机上的小数据文件,它通常由网站在后端生成,通过浏览器发送到前端,并在前端保存。然后,在用户下次访问该网站时,该网站可以再次检索这些 cookie,并计算出该用户的特定信息,例如用户首选语言、购物车中的项目等。通常情况下,cookie 用于存储与特定网站相关的用户偏好和其他信息。
Javascript 对cookie的操作
使用JavaScript 可以对 cookie 进行以下操作:
- 创建cookie
- 获取cookie
- 设置cookie到期时间
- 删除cookie
创建cookie
要创建一个 cookie,请使用 document.cookie:
document.cookie = "username=Minghui Zhang";
上面的代码创建一个名为 username,值为 Minghui Zhang 的 cookie。如果您尝试查看 document.cookie,则应该看到以下输出:
"username=Minghui Zhang"
获取cookie
要获取 cookie 的值,请使用以下代码行:
var x = document.cookie;
上面的代码将返回存储在 cookie 中的所有内容。
如果要获取特定 cookie 的值,请使用以下函数:
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
该函数将返回存储在 cookie 中的 cname 变量的值。如果 cookie 不存在,则返回空字符串。
设置 cookie 的到期时间
默认情况下,cookie 是在浏览器关闭时删除的。但是,您还可以将 cookie 设置为在特定日期过期。要设置 cookie 的到期日期,请使用以下语法:
var d = new Date();
d.setTime(d.getTime() + (24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = "username=John" + ";" + expires;
上面的代码将在一天后过期 username cookie。
删除cookie
要删除 cookie,请将 cookie 的到期日期设置为过去的日期,如下所示:
document.cookie = "username=John; expires=Thu, 01 Jan 1970 00:00:00 UTC;";
该代码会删除 username cookie。
示例
示例1: 在用户访问网站时记录访问次数
function checkCookie() {
var count = getCookie("count") || 0;
count++;
setCookie("count", count, 30);
alert("你是第" + count + "次访问该网站!");
}
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
该示例如下:
<!DOCTYPE html>
<html>
<body onload="checkCookie()">
<h2>Cookie 计数器</h2>
<p>每当您访问此网站时,cookie 将存储您的访问次数。</p>
</body>
</html>
示例2: 通过 cookie 在网站之间共享数据
假设您正在开发一个具有登录和购物车功能的网站,并且您想使购物车在不同网页之间进行共享。要通过 cookie 共享购物车数据,请使用以下代码:
var cart = {item1: "product1", item2: "product2"};
// To set the cart
document.cookie = "cart=" + JSON.stringify(cart);
// To get the cart
var cart = JSON.parse(getCookie("cart"));
上面的代码将以 JSON 格式存储 cart 对象,并通过 cookie 共享它所表示的购物车数据。
结论
cookie 是 Web 开发人员的重要工具。使用 JavaScript,开发人员可以轻松地创建、获取和更新 cookie,从而存储访问者的个性化信息、购买历史和其他数据。无论是为网站追踪用户信息还是为在不同页面之间共享数据,使用 cookie 都是极其有用的。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Javascript 对cookie操作详解及实例 - Python技术站