在网页开发场景中，经常需要把一些数据保存在用户的浏览器端，避免每次请求都从服务器获取重复数据，提升页面加载速度和用户体验，javascript提供了多种本地存储的实现方式，其中cookie和localStorage是最常用的两种。
javascript实现本地存储的常用方式
cookie的使用方法
cookie是最早出现的浏览器本地存储方案，javascript可以通过document.cookie来操作cookie。设置cookie时需要拼接对应的键值对和配置参数，获取cookie时得到的是所有cookie拼接的字符串，需要手动解析。
下面是设置和获取cookie的示例代码：
// 设置cookie，包含键值、过期时间、路径配置
function setCookie(name, value, days) {
let expires = '';
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = '; expires=' + date.toUTCString();
}
document.cookie = name + '=' + encodeURIComponent(value) + expires + '; path=/';
}
// 获取指定名称的cookie
function getCookie(name) {
const nameEQ = name + '=';
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
let cookie = cookies[i];
while (cookie.charAt(0) === ' ') {
cookie = cookie.substring(1, cookie.length);
}
if (cookie.indexOf(nameEQ) === 0) {
return decodeURIComponent(cookie.substring(nameEQ.length, cookie.length));
}
}
return null;
}
// 删除指定cookie
function deleteCookie(name) {
setCookie(name, '', -1);
}
// 使用示例
setCookie('username', '张三', 7); // 保存用户名7天
const username = getCookie('username'); // 获取保存的用户名
console.log(username); // 输出：张三
deleteCookie('username'); // 删除用户名cookie
localStorage的使用方法
localStorage是HTML5新增的本地存储方案，使用起来比cookie简单很多，它提供了直接的API来操作存储的数据，数据会以键值对的形式保存在浏览器中，不需要手动拼接字符串。
下面是localStorage的基础操作示例：
// 保存数据到localStorage
localStorage.setItem('user_id', '1001');
localStorage.setItem('user_token', 'abc123def456');
// 从localStorage获取数据
const userId = localStorage.getItem('user_id');
const userToken = localStorage.getItem('user_token');
console.log(userId, userToken); // 输出：1001 abc123def456
// 删除指定的localStorage数据
localStorage.removeItem('user_token');
// 清空所有localStorage数据
localStorage.clear();
cookie与localStorage的核心区别
虽然两者都能实现浏览器端的数据存储，但是在多个维度上存在明显差异，具体对比如下：
| 对比维度 | cookie | localStorage |
|---|---|---|
| 存储大小 | 单个cookie大小不能超过4KB，每个域名下的cookie数量也有限制 | 单个域名下的localStorage存储上限一般为5MB，远大于cookie |
| 有效期 | 可以设置过期时间，过期后自动删除；如果不设置过期时间，关闭浏览器后cookie会被清除 | 永久存储，除非手动调用删除方法或者清除浏览器缓存，否则数据一直存在 |
| 数据传递 | 每次同源的HTTP请求都会自动携带cookie，会增加请求头的大小，浪费带宽 | 数据仅在浏览器本地保存，不会随HTTP请求自动发送，不会影响请求性能 |
| 操作复杂度 | 原生操作需要手动拼接字符串、编码解码，操作起来比较繁琐 | 提供了setItem、getItem等简洁的API，操作直观方便 |
| 作用域 | 可以设置path和domain，控制cookie的作用范围 | 仅在同源的页面下共享，没有额外的路径控制配置 |
如何选择存储方案
如果是需要存储少量数据，并且需要让数据随请求发送到服务器，比如用户登录态、身份标识等场景，适合使用cookie。
如果是需要存储大量数据，并且数据不需要发送到服务器，比如用户的个性化设置、本地缓存的页面数据等场景，更适合使用localStorage。
另外需要注意，localStorage存储的数据如果是敏感信息，存在被XSS攻击获取的风险，敏感数据建议结合后端验证机制使用，不要单纯依赖本地存储做安全校验。
javascriptlocalStoragecookie本地存储修改时间：2026-06-12 04:00:29