JavaScript如何使用Cookie存值

简介: JavaScript如何使用Cookie存值

在JavaScript中,可以使用document.cookie来设置、读取或删除Cookie。以下是一个如何使用document.cookie来存储一个值的简单示例:

设置Cookie:

// 假设我们有一个值要存储  
let valueToStore = 'Hello, World!';  
  
// 设置Cookie的名称、值和过期时间  
// 注意:这里为了简单起见,我们没有设置域名、路径和Secure/HttpOnly标志  
// 但在生产环境中,你应该考虑设置这些属性以提高安全性  
let cookieName = 'myCookie';  
let expires = new Date();  
expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000)); // 设置过期时间为1天后  
  
document.cookie = `${cookieName}=${encodeURIComponent(valueToStore)};expires=${expires.toUTCString()};path=/`;

在这个例子中,我们使用encodeURIComponent来确保值中的任何特殊字符都被正确编码,以便它们可以安全地存储在Cookie中。我们还设置了过期时间和路径。

读取Cookie:

// 读取名为'myCookie'的Cookie的值  
function getCookie(name) {  
    let cookieArray = document.cookie.split('; '); // 注意:这里假设cookie之间用'; '分隔  
    for (let i = 0; i < cookieArray.length; i++) {  
        let cookiePair = cookieArray[i].split('=');  
        if (decodeURIComponent(cookiePair[0]) === name) {  
            return decodeURIComponent(cookiePair[1]);  
        }  
    }  
    return null;  
}  
  
let cookieValue = getCookie('myCookie');  
console.log(cookieValue); // 输出: Hello, World!

在getCookie函数中,我们首先使用split方法将document.cookie字符串分割成一个数组,其中每个元素都是一个单独的Cookie(假设它们用; 分隔)。然后,我们遍历这个数组,检查每个Cookie的名称是否匹配我们要查找的名称。如果找到匹配项,我们就返回解码后的值。

删除Cookie

要删除一个Cookie,只需将其过期时间设置为一个过去的日期即可:

let expires = new Date();  
expires.setTime(expires.getTime() - (1 * 24 * 60 * 60 * 1000)); // 设置过期时间为1天前  
  
document.cookie = `myCookie=;expires=${expires.toUTCString()};path=/`;


相关文章
|
1月前
|
存储 JavaScript 前端开发
js中session、cookie、 localStorage和SessionStorage的区别和特点
js中session、cookie、 localStorage和SessionStorage的区别和特点
|
5天前
|
存储 前端开发 JavaScript
RegExp 魔法阵与 Cookie 记忆宫殿:JavaScript 中的秘密宝藏
RegExp 魔法阵与 Cookie 记忆宫殿:JavaScript 中的秘密宝藏
|
9天前
|
JavaScript 前端开发 数据安全/隐私保护
JS中使用Cookie实现记住密码以及设置密码过期时间
JS中使用Cookie实现记住密码以及设置密码过期时间
4 0
|
1月前
|
存储 JavaScript 前端开发
JavaScript中的cookie、localStorage的区别和特点
JavaScript中的cookie、localStorage的区别和特点
24 6
|
1月前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
22 0
|
7月前
|
存储 JavaScript 前端开发
js中session、cookie、 localStorage和SessionStorage的区别和特点
js中session、cookie、 localStorage和SessionStorage的区别和特点
51 0
|
9月前
|
存储 JavaScript
js -cookie的操作
cookie是存储在客户端浏览器中的一段文本信息。
|
10月前
|
JavaScript
js设置、修改、获取、删除 cookie
js设置、修改、获取、删除 cookie
143 0
|
11月前
|
存储 JavaScript 安全
JavaScript Cookie
JavaScript Cookie
|
1月前
|
存储 JavaScript 前端开发
JS中Cookie的基本使用
JS中Cookie的基本使用