【高频考点精讲】前端工程师必会的10种浏览器存储方案对比

最新推荐文章于 2025-05-12 13:23:59 发布

全栈老李技术面试

最新推荐文章于 2025-05-12 13:23:59 发布

阅读量934

点赞数 18

分类专栏：前端高频考点精讲文章标签：前端 javascript html css 面试题 react vue

本文链接：https://blog.csdn.net/liuyun_12138/article/details/147658987

版权

前端工程师必会的10种浏览器存储方案对比

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

作为前端工程师，我们每天都在和浏览器打交道，而数据存储是绕不开的话题。今天全栈老李就带大家盘点一下前端开发中常见的10种浏览器存储方案，从最基础的localStorage到新兴的IndexedDB，帮你彻底搞懂它们的区别和适用场景。

1. Cookie（老古董但依然坚挺）

Cookie是最早的浏览器存储方案，它的特点是：

存储大小有限（4KB左右）
每次HTTP请求都会自动携带（影响性能）
可以设置过期时间

// 设置Cookie（全栈老李提醒：注意encodeURIComponent防止特殊字符）
document.cookie = `username=${
     encodeURIComponent('全栈老李')}; expires=${
     new Date(Date.now() + 86400e3).toUTCString()}; path=/`;

// 读取Cookie
const cookies = document.cookie.split(';').reduce((res, c) => {
   
  const [key, val] = c.