下面详细讲解如何使用JavaScript中的cookie设置查看与删除功能：
1. 什么是 cookie？
cookie是一种储存在用户客户端的小型文本文件，用于存储用户数据，实现网站的状态管理。cookie一般用于记录用户的登录状态、购物车信息等。
2. 如何设置 cookie？
在JavaScript中，可以通过document.cookie来设置cookie。下面是示例代码：
document.cookie = "username=John";
上述代码会在客户端创建一个名为username的cookie，它的值为John。
也可以通过添加expires属性来设置过期时间：
// 过期时间为1小时
var expires = new Date();
expires.setTime(expires.getTime() + (60 * 60 * 1000));
document.cookie = "username=John;expires=" + expires.toUTCString();
上述代码会在客户端创建一个名为username的cookie，它的值为John，过期时间为1小时。
3. 如何获取 cookie？
可以通过document.cookie来获取当前网站的所有cookie。下面是一个示例：
console.log(document.cookie);
上述代码会打印出当前网站的所有cookie。
如果需要获取某个cookie的值，可以通过函数来实现：
function getCookie(name) {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.indexOf(name + '=') === 0) {
return cookie.substring(name.length + 1, cookie.length);
}
}
return null;
}
上述代码中，getCookie()函数用于获取指定名称的cookie的值。如果存在该cookie，则返回该cookie的值；如果不存在，则返回null。
4. 如何删除 cookie？
可以通过设置cookie的expires属性为一个过去的时间来删除cookie。下面是一个示例：
// 删除名为username的cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC;";
上述代码会删除名为username的cookie。
示例1：记录用户选择语言的设置
以下是一个示例，演示如何使用cookie记录用户选择的语言设置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>语言选择</title>
<script>
function selectLanguage(lang) {
// 记录用户选择的语言设置
document.cookie = "lang=" + lang;
// 刷新页面
location.reload();
}
function getLanguage() {
// 获取用户选择的语言设置
var lang = getCookie("lang");
// 如果用户已经选择过语言，则返回语言设置
if (lang) {
return lang;
}
// 如果用户没有选择过语言，则返回默认语言（英语）
return "en";
}
function showPage() {
// 获取用户选择的语言设置
var lang = getLanguage();
// 根据用户选择的语言设置显示网页内容
if (lang === "en") {
document.getElementById("content").innerHTML = "This is the English version of the website.";
document.getElementById("select-button").innerHTML = "<button onclick=\"selectLanguage('zh')\">中文</button>";
} else {
document.getElementById("content").innerHTML = "这是网站的中文版。";
document.getElementById("select-button").innerHTML = "<button onclick=\"selectLanguage('en')\">English</button>";
}
}
function getCookie(name) {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.indexOf(name + '=') === 0) {
return cookie.substring(name.length + 1, cookie.length);
}
}
return null;
}
</script>
</head>
<body onload="showPage()">
<div id="content"></div>
<div id="select-button"></div>
</body>
</html>
上述代码中，selectLanguage()函数用于记录用户选择的语言设置。getLanguage()函数用于获取用户选择的语言设置并返回。showPage()函数用于根据用户选择的语言设置显示网页内容。
示例2：记录用户最近一次访问时间
以下是另一个示例，演示如何使用cookie记录用户最近一次访问时间。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>最近访问时间</title>
<script>
function showLastVisitedTime() {
// 获取上一次访问时间
var lastVisitedTime = getCookie("lastVisitedTime");
// 如果没有上一次访问时间，则显示默认信息
if (!lastVisitedTime) {
document.getElementById("msg").innerHTML = "欢迎初次访问本网站！";
return;
}
// 计算时间差
var now = new Date();
var last = new Date(lastVisitedTime);
var diff = now.getTime() - last.getTime();
var diffDays = Math.floor(diff / (1000 * 60 * 60 * 24));
// 显示时间差信息
if (diffDays === 0) {
document.getElementById("msg").innerHTML = "您上次访问本网站是今天！";
} else {
document.getElementById("msg").innerHTML = "您上次访问本网站是 " + diffDays + " 天前！";
}
}
function setLastVisitedTime() {
// 设置本次访问时间
var now = new Date();
document.cookie = "lastVisitedTime=" + now.toUTCString();
}
function getCookie(name) {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.indexOf(name + '=') === 0) {
return cookie.substring(name.length + 1, cookie.length);
}
}
return null;
}
</script>
</head>
<body onload="showLastVisitedTime();setLastVisitedTime();">
<div id="msg"></div>
</body>
</html>
上述代码中，showLastVisitedTime()函数用于显示上一次访问时间的信息。setLastVisitedTime()函数用于设置本次访问时间。在浏览器加载页面时，先调用showLastVisitedTime()函数显示上一次访问时间的信息，然后再调用setLastVisitedTime()函数设置本次访问时间的cookie。这样就可以在下一次访问网站时显示上一次访问时间的信息了。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScrpt中如何使用 cookie 设置查看与删除功能 - Python技术站
微信扫一扫 
支付宝扫一扫 