JS中Cookie的基本使用

简介: JS中Cookie的基本使用



JavaScript Cookie(JavaScript 的 Cookie)是一种在Web浏览器中存储和检索用户信息的机制。它允许网站在用户计算机上存储小型数据片段,以便在之后的会话中使用这些数据。Cookie通常用于持久化用户首选项、跟踪用户行为和提供个性化体验。

通过JavaScript,您可以使用document.cookie属性来访问和操作Cookie。document.cookie返回一个字符串,其中包含当前页面可用的所有Cookie。您可以将新的Cookie添加到该字符串中,或编辑/删除现有的Cookie。

要创建一个新的Cookie,您需要指定Cookie的名称和值,并可以选择设置其他可选参数,如过期时间、路径和域。

JavaScript 创建Cookie:

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。

JavaScript 中,创建 cookie 如下所示:

document.cookie="username=John Doe";

您还可以为 cookie 添加一个过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除:

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下,cookie 属于当前页面:

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

JavaScript 读取 Cookie :

在 JavaScript 中, 可以使用以下代码来读取 cookie:

var x = document.cookie;

JavaScript 修改 Cookie:

在 JavaScript 中,修改 cookie 类似于创建 cookie:

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

JavaScript 删除 Cookie :

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

document.cookie 属性看起来像一个普通的文本字符串,其实它不是。

即使您在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时,cookie 信息是以名/值对的形式展示的。

如果您设置了新的 cookie,旧的 cookie 不会被覆盖。 新 cookie 将添加到 document.cookie 中

 

相关文章
|
7月前
|
存储 JavaScript 前端开发
js中session、cookie、 localStorage和SessionStorage的区别和特点
js中session、cookie、 localStorage和SessionStorage的区别和特点
|
2月前
|
存储 JavaScript 前端开发
JavaScript Cookie
JavaScript Cookie
17 0
|
4月前
|
存储 前端开发 JavaScript
揭秘!JavaScript本地存储的四大绝技:从Cookie到IndexedDB,让你的Web应用秒变数据存储高手,轻松应对各种挑战!
【8月更文挑战第4天】JavaScript为核心前端技术,提供多样本地存储方案以优化用户体验与减少服务器负载。首先,Cookie虽用于基本数据如登录状态,但受大小限制及安全性影响。接着,Web Storage中的LocalStorage持久存储不变数据,SessionStorage则限于单次会话。更进一步,IndexedDB作为全面数据库解决方案,支持复杂数据操作但使用较复杂。每种方式根据应用需求各有优势。
79 9
|
5月前
|
存储 Web App开发 JavaScript
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
237 0
|
5月前
|
存储 Web App开发 移动开发
js【详解】本地存储 Cookie、sessionStorage、localStorage
js【详解】本地存储 Cookie、sessionStorage、localStorage
155 0
|
6月前
|
JavaScript 前端开发 数据安全/隐私保护
JS中使用Cookie实现记住密码以及设置密码过期时间
JS中使用Cookie实现记住密码以及设置密码过期时间
110 0
|
6月前
|
存储 JavaScript 前端开发
JavaScript如何使用Cookie存值
JavaScript如何使用Cookie存值
33 0
|
7月前
|
存储 JavaScript 前端开发
JavaScript中的cookie、localStorage的区别和特点
JavaScript中的cookie、localStorage的区别和特点
74 6
|
7月前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
55 0
|
7月前
|
存储 JavaScript 前端开发
Cookie的基本使用
Cookie的基本使用
83 0