下面是关于“JS操作Cookie写入和读取实例代码”的完整攻略。
下面是关于“JS操作Cookie写入和读取实例代码”的完整攻略。
什么是Cookie
Cookie是网站可以存储在用户计算机中的小文件。这些文件包含有关用户访问网站的信息,例如登录凭据、购物车中的项目和其他首选项。
为何要使用Cookie
可以使用Cookie提供个性化用户体验、记录用户偏好并跟踪用户行为,部分网站为页面访问量和跟踪广告效果也使用Cookie。Cookie的存储是由用户浏览器进行的,因此不需要在服务器端存储任何东西。
JS如何操作Cookie
JavaScript可以通过document.cookie来操作Cookie。document.cookie是一个字符串,其中存储了页面所需的所有Cookie数据。
以下是一个用于设置Cookie的示例:
document.cookie = "username=John Doe; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
此代码将创建一个名为username的新Cookie,其值为John Doe。此Cookie的“过期时间”将被设置为现实生活中无限时间以避免其过期,路径被设置为页面根目录以确保其对整个网站可见。
以下是一个用于读取Cookie的示例:
function getCookie(name) {
var cookieArr = document.cookie.split(";");
for(var i = 0; i < cookieArr.length; i++) {
var cookiePair = cookieArr[i].split("=");
if(name == cookiePair[0].trim()) {
return decodeURIComponent(cookiePair[1]);
}
}
return null;
}
此代码创建了一个名为getCookie的函数。该函数接受一个字符串参数并返回与该名称相匹配的Cookie的值。如果找不到缓存名称,则返回null。
示例说明
下面有两个与Cookie相关的示例,一个用于设置Cookie,另一个用于读取Cookie。
示例1:设置Cookie
在你的网站上创建一个点击按钮的事件,使用Javascript代码将一个名为“username”的Cookie设置为“John Doe”。
HTML代码:
<!DOCTYPE html>
<html>
<body>
<button onclick="setCookie()">设置Cookie</button>
<script>
function setCookie() {
document.cookie = "username=John Doe;expires=Fri, 31 Dec 9999 23:59:59 GMT;path=/";
alert("Cookie设置成功!");
}
</script>
</body>
</html>
JavaScript代码:
function setCookie() {
document.cookie = "username=John Doe;expires=Fri, 31 Dec 9999 23:59:59 GMT;path=/";
alert("Cookie设置成功!");
}
示例2:读取Cookie
在你的网站上创建一个点击按钮的事件,使用JavaScript代码来读取名为“username”的Cookie的值。
HTML代码:
<!DOCTYPE html>
<html>
<body>
<button onclick="getCookie()">读取Cookie</button>
<script>
function getCookie() {
var cookieValue = getCookieByName("username");
if(cookieValue != null) {
alert("Cookie值为: " + cookieValue);
} else {
alert("Cookie不存在。");
}
}
function getCookieByName(cookieName) {
var cookieArray = document.cookie.split(";");
for(var i = 0; i < cookieArray.length; i++) {
var cookiePair = cookieArray[i].split("=");
if(cookieName == cookiePair[0].trim()) {
return cookiePair[1];
}
}
return null;
}
</script>
</body>
</html>
JavaScript代码:
function getCookie() {
var cookieValue = getCookieByName("username");
if(cookieValue != null) {
alert("Cookie值为: " + cookieValue);
} else {
alert("Cookie不存在。");
}
}
function getCookieByName(cookieName) {
var cookieArray = document.cookie.split(";");
for(var i = 0; i < cookieArray.length; i++) {
var cookiePair = cookieArray[i].split("=");
if(cookieName == cookiePair[0].trim()) {
return cookiePair[1];
}
}
return null;
}
以上是关于“JS操作Cookie写入和读取实例代码”的完整攻略。
本文标题为:JS操作Cookie写入和读取实例代码
- JavaScript整除运算函数ceil和floor的区别分析 2023-11-30
- js获取url参数值的两种方式 2024-01-15
- vue 行为验证码之滑动验证AJ-Captcha使用详解 2023-07-10
- Vue3 从入门到实战 进阶式掌握完整知识体系 2023-10-08
- 切记ajax中要带上AntiForgeryToken防止CSRF攻击 2022-10-17
- 基于vue手写仿钉钉 滑动日历 2023-10-08
- electron-vue构建项目 2023-10-08
- ajax获得json对象数组 循环输出数据的方法 2023-02-23
- 详解CSS中的Box Model盒属性的使用 2023-12-14
- html5 分层屏幕适配的方法 2023-12-14