JavaScript Cookie & localStorage

最新推荐文章于 2025-06-21 07:57:34 发布

原创最新推荐文章于 2025-06-21 07:57:34 发布 · 364 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Cookie #localStorage

JavaScript 专栏收录该内容

46 篇文章

订阅专栏

本文详细介绍了Cookie和LocalStorage两种浏览器数据存储方式的使用。Cookie用于存储用户访问习惯，但不应保存敏感信息，可设置过期时间、访问域及路径。而LocalStorage则提供持久化的本地存储，适用于存储非敏感数据。文章还提供了封装好的Cookie操作函数，并对比了两者的特点和应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Cookie

概述

Cookie全称HTTP Cookie，是浏览器存储数据的一种方式
一般会自动随着浏览器每次请求发送到服务器
可以利用Cookie跟踪统计用户访问该网站的习惯，如：访问时间、访问页面、停留时间
不要在Cookie中保存重要信息

操作Cookie

查询

document.cookie; //hello=world; hello2=world2

设置

document.cookie = "key1=value1";
document.cookie = "key2=value2";

encodeURIComponent & decodeURIComponent

encodeURIComponent 用于处理Cookie中的非英文字符
decodeURIComponent 用于解码

document.cookie = `username=${encodeURIComponent("小明")}`;

expires & max-age

expires 指定失效时间
max-age 指定当前时间多少秒后过期；当max-age的值是0或负数，则Cookie会被删除
失效的Cookie会被浏览器清除
没有设置失效时间的Cookie会被称为会话Cookie，它存在内存中，当会话结束或浏览器关闭Cookie会被清除

document.cookie = `key1=value1;expires=${new Date("2022-1-1 00:00:00")}`;

document.cookie = `key2=value2;max-age=5`;

domain

domain 限制访问Cookie的范围

path

同一域名下，限制不同路径访问Cookie

HttpOnly

设置HttpOnly属性的Cookie不能被JS访问

secure

限定Cookie只能在https下使用

封装Cookie

//设置cookie
const setCookie = (name, value, { maxAge, domain, path, secure } = {}) => {

    let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
    if (typeof maxAge === "number") {
        cookieText += `;max-age=${maxAge}`;
    }
    if (domain) {
        cookieText += `;domain=${domain}`;
    }
    if (path) {
        cookieText += `;path=${path}`;
    }
    if (secure) {
        cookieText += `;secure`;
    }
    document.cookie = cookieText;
};

//获取cookie
const getCookie = name => {
    name = `${encodeURIComponent(name)}`;
    const cookies = document.cookie.split("; ");
    for (const item of cookies) {
        const [cookieName, cookieValue] = item.split("=");
        if (cookieName === name) {
            return decodeURIComponent(cookieValue);
        }
    }

};

//删除cookie
const removeCookie = (name, { domain, path } = {}) => {
    setCookie(name, "", { domain, path, maxAge: -1 });
}

export { setCookie, getCookie, removeCookie };

LocalStorage

概述

LocalStorage是浏览器存储数据的一种方式，它只存储在本地，不会发送到服务器
LocalStorage是持久化的本地存储
SessionStorage是会话结束时，才会被清空

使用

设置

localStorage.setItem("username", "Tom");
localStorage.setItem("age", "18");
localStorage.setItem("sex", "男");

查询

console.log(localStorage); //Storage {age: "18", username: "Tom", sex: "男", length: 3}
console.log(localStorage.length); //3
console.log(localStorage.getItem("username")); //Tom
console.log(localStorage.getItem("age")); //18

删除

//删除指定数据
localStorage.removeItem("age"); 

//清除所有
localStorage.clear();