团队建设海报网站,wordpress 新建侧边栏,网站开发培训班,岳阳商城网站建设什么是 Cookie#xff1f;
在JavaScript中#xff0c;cookie是一种小型的文本文件#xff0c;它存储在用户的计算机上。通过使用cookie#xff0c;网站可以向用户的浏览器发送数据#xff0c;并将该数据保留在浏览器中#xff0c;使网站能够在不同页面之间传递数据或存储…什么是 Cookie
在JavaScript中cookie是一种小型的文本文件它存储在用户的计算机上。通过使用cookie网站可以向用户的浏览器发送数据并将该数据保留在浏览器中使网站能够在不同页面之间传递数据或存储用户偏好设置以便在后续访问中进行读取和使用。
创建Cookie
要创建一个cookie可以使用document.cookie属性进行设置。document.cookie是一个字符串其中包含当前与网站相关联的所有cookie。要创建一个名为cookieName的cookie其值为cookieValue可以使用以下语法
document.cookie cookieNamecookieValue;此时cookie将被存储在浏览器中。
设置过期时间
可以通过为cookie添加expires属性来设置cookie的过期时间。例如如果要将cookie的过期时间设置为2023年12月31日23:59:59 UTC可以这样写
document.cookie cookieNamecookieValue; expiresThu, 31 Dec 2023 23:59:59 UTC;当达到过期时间时浏览器将自动删除该cookie。
指定路径
可以通过为cookie添加path属性来指定cookie的可访问路径。默认情况下cookie只能在创建它的页面及其子目录中访问。如果要使cookie在整个网站范围内都可访问可以将path设置为根目录
document.cookie cookieNamecookieValue; path/;读取Cookie
要读取cookie的值可以使用document.cookie来获取当前与网站相关联的所有cookie。通常cookie值将存储在一个字符串中。为了提取特定cookie的值可以使用正则表达式或其他字符串处理方法。下面是一个示例展示如何获取名为cookieName的cookie值
var cookieValue document.cookie.replace(/(?:(?:^|.*;\s*)cookieName\s*\\s*([^;]*).*$)|^.*$/, $1);这将从document.cookie字符串中提取名为cookieName的cookie的值并将其存储在变量cookieValue中。
删除Cookie
要删除cookie可以通过将过期时间设置为过去的时间来使其过期从而让浏览器自动删除cookie。例如要删除名为cookieName的cookie可以执行以下操作
document.cookie cookieName; expiresThu, 01 Jan 1970 00:00:00 UTC;这将将cookie的过期时间设置为过去的时间使其立即过期并被删除。
注意:
需要注意的是JavaScript Cookie有一些限制。浏览器对cookie的数量和大小都有限制。此外由于安全原因浏览器还实施了跨域设置限制网站在不同域之间访问cookie。更复杂的操作和cookie设置可以使用第三方库来简化处理例如js-cookie等。
示例代码:
!DOCTYPE html
html
headtitleCookie操作示例页面/title
/head
bodyh1Cookie操作示例页面/h1!-- 创建Cookie按钮 --button idcreateBtn创建Cookie/button!-- 读取Cookie按钮 --button idreadBtn读取Cookie/button!-- 修改Cookie按钮 --button idupdateBtn修改Cookie/button!-- 设置Cookie过期时间按钮 --button idexpireBtn设置过期时间/button!-- 删除Cookie按钮 --button iddeleteBtn删除Cookie/button!-- JavaScript代码 --script// 创建Cookie按钮点击事件处理函数document.getElementById(createBtn).addEventListener(click, function() {document.cookie myCookieHello World;alert(已创建Cookie);});// 读取Cookie按钮点击事件处理函数document.getElementById(readBtn).addEventListener(click, function() {var cookieValue document.cookie.replace(/(?:(?:^|.*;\s*)myCookie\s*\\s*([^;]*).*$)|^.*$/, $1);alert(Cookie的值为 cookieValue);});// 修改Cookie按钮点击事件处理函数document.getElementById(updateBtn).addEventListener(click, function() {document.cookie myCookieHow are you?;alert(已修改Cookie);});// 设置Cookie过期时间按钮点击事件处理函数document.getElementById(expireBtn).addEventListener(click, function() {var expirationDate new Date();expirationDate.setFullYear(2023);expirationDate.setMonth(11); // 月份从0开始11代表12月expirationDate.setDate(31);document.cookie myCookieHow are you?; expires expirationDate.toUTCString();alert(已设置Cookie过期时间为2023年12月31日);});// 删除Cookie按钮点击事件处理函数document.getElementById(deleteBtn).addEventListener(click, function() {document.cookie myCookie; expiresThu, 01 Jan 1970 00:00:00 UTC;alert(已删除Cookie);});/script
/body
/html以上是一个包含创建、读取、修改、设置过期时间和删除Cookie的示例HTML页面。每个按钮都有一个唯一的id并通过JavaScript代码绑定了对应的点击事件处理函数。点击不同的按钮会执行相应的操作并弹出提示框显示相关信息。
