【JavaScript】cookie的使用
Cookie 让您在网页中存储用户信息。
该随笔将讲述如何在 JavaScript 中使用 cookie。
JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie。
Cookie 保存在名称值对中
cookieName=cookieValue
当浏览器从服务器请求一个网页时，将属于该页的 cookie 添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息。
创建 cookie
document.cookie = "cookieName=cookieValue";
您还可以添加有效日期（UTC 时间）。默认情况下，在浏览器关闭时会删除 cookie：
document.cookie = "username=John; expires=Sun, 31 Dec 2022 12:00:00 UTC";
通过 path 参数，您可以告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页：
document.cookie = "username=John; expires=Sun, 31 Dec 2022 12:00:00 UTC; path=/";
读取 cookie
var x = document.cookie;
document.cookie 会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2=value; cookie3=value;
改变 cookie
可以像你创建 cookie 一样改变它：
document.cookie = "username=Bob; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
删除 cookie
删除 cookie 时不必指定 cookie 值，直接把 expires 参数设置为过去的日期即可：
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
您应该定义 cookie 路径以确保删除正确的 cookie。
如果你不指定路径，一些浏览器不会让你删除 cookie。
举例
下面的例子取自w3school
<!DOCTYPE html>
<html>
<head>
<script>
//设置 cookie 的函数
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
//获取 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 的函数
function checkCookie() {
var user=getCookie("username");
if (user != "") {
alert("再次欢迎您，" + user);
} else {
user = prompt("请输入姓名：","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
</script>
</head>
<body onload="checkCookie()"></body>
</html>
本文来自博客园，作者：hzyuan，转载请注明原文链接：https://www.cnblogs.com/hzyuan/p/15921192.html
分类:
前端 / Javascript
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）