JS如何操作浏览器存储

浏览器存储的主要类型

浏览器为前端开发提供了多种数据存储方案，不同方案适用于不同的业务场景，常见的存储类型包括localStorage、sessionStorage、Cookie和IndexedDB，下面分别介绍它们的JS操作方法。

localStorage操作

localStorage是持久化存储，数据不会随浏览器关闭消失，除非手动删除，容量一般为5MB左右，仅在同源页面下可访问。

基本操作方法

存储数据使用setItem方法，读取数据使用getItem方法，删除单条数据使用removeItem方法，清空所有数据使用clear方法。

// 存储数据
localStorage.setItem('username', '张三');
// 读取数据
const username = localStorage.getItem('username');
console.log(username); // 输出 张三
// 删除指定数据
localStorage.removeItem('username');
// 清空所有localStorage数据
localStorage.clear();

sessionStorage操作

sessionStorage是会话级存储，数据仅在当前浏览器标签页有效，关闭标签页后数据会自动清除，容量同样为5MB左右，仅同源同标签页可访问。

基本操作方法

sessionStorage的操作方法和localStorage完全一致，只是生命周期不同。

// 存储会话数据
sessionStorage.setItem('temp_token', 'abc123');
// 读取会话数据
const tempToken = sessionStorage.getItem('temp_token');
console.log(tempToken); // 输出 abc123
// 删除指定会话数据
sessionStorage.removeItem('temp_token');
// 清空所有会话数据
sessionStorage.clear();

Cookie操作

Cookie是最早的浏览器存储方案，容量较小一般为4KB左右，可以设置过期时间，会自动随请求发送到服务端，常用于存储登录态等小体积数据。

原生JS操作方法

原生JS通过document.cookie读写Cookie，写入时需要拼接过期时间、路径等属性，读取后需要自行解析字符串。

// 设置Cookie，过期时间为7天后，路径为根路径
const expireDays = 7;
const expireDate = new Date();
expireDate.setTime(expireDate.getTime() + expireDays * 24 * 60 * 60 * 1000);
document.cookie = `user_id=1001;expires=${expireDate.toUTCString()};path=/`;
// 读取Cookie
const cookieStr = document.cookie;
console.log(cookieStr); // 输出 user_id=1001
// 删除Cookie，设置过期时间为过去的时间
const deleteDate = new Date();
deleteDate.setTime(deleteDate.getTime() - 1);
document.cookie = `user_id=;expires=${deleteDate.toUTCString()};path=/`;

IndexedDB操作

IndexedDB是浏览器提供的本地数据库存储方案，容量大可以存储结构化数据，支持索引查询，适用于存储大量复杂数据的场景。

基本操作流程

IndexedDB的操作是异步的，需要先打开数据库，再创建对象存储空间，最后进行数据的增删改查。

// 打开或创建数据库
const request = indexedDB.open('userDB', 1);
// 数据库版本更新时创建对象存储空间
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  // 创建名为user的对象存储空间，主键为id
  if (!db.objectStoreNames.contains('user')) {
    db.createObjectStore('user', { keyPath: 'id' });
  }
};
// 打开数据库成功
request.onsuccess = function(event) {
  const db = event.target.result;
  // 开启事务，操作user存储空间，模式为读写
  const transaction = db.transaction(['user'], 'readwrite');
  const store = transaction.objectStore('user');
  // 添加数据
  const addRequest = store.add({ id: 1, name: '李四', age: 25 });
  addRequest.onsuccess = function() {
    console.log('数据添加成功');
  };
  // 读取数据
  const getRequest = store.get(1);
  getRequest.onsuccess = function(event) {
    console.log(event.target.result); // 输出 {id:1, name:'李四', age:25}
  };
};
// 打开数据库失败
request.onerror = function(event) {
  console.log('数据库打开失败');
};

不同存储方式的对比

为了帮助开发者选择合适的存储方案，下面从容量、生命周期、是否随请求发送、适用场景几个维度对比几种存储方式：

操作注意事项

• 存储的数据都会转为字符串格式，存储对象时需要先用JSON.stringify转换，读取时用JSON.parse解析。
• localStorage和sessionStorage仅在同源策略下可访问，跨域页面无法读取对方的存储数据。
• Cookie的大小限制严格，不要存储过多内容，同时要注意设置合理的过期时间和路径，避免安全问题。
• IndexedDB的操作是异步的，需要处理好成功和失败的回调，避免数据操作异常。

localStoragesessionStorageCookieIndexedDB修改时间：2026-07-05 05:15:12