存储的进化：从 MySQL 到浏览器缓存，数据到底住在哪？

摘要：从硬盘里的 MySQL 到浏览器缓存，从 Redis 到云存储，再到 LLM 的向量数据库——数据存储有无数种形态。本文从 localStorage 入手，梳理各类存储方案的定位与取舍，并解释为什么前端开发必须理解存储。

📑 目录

• 一个前端页面，数据存哪？

• 本地存储：localStorage 是什么？

• 浏览器缓存：为什么第二次打开那么快？

• MySQL vs Redis：硬盘 vs 内存

• 云存储与文件系统

• LLM 的存储：嵌入向量数据库

• 一点总结

• 互动讨论

  
  

一个前端页面，数据存哪？

你打开一个页面，看到一份待办清单。你添加了一项，刷新页面——它还在。

这份数据存哪了？

它没有发给服务器，因为没看到网络请求。它也没消失，因为刷新后还在。答案是 localStorage——浏览器自带的一个小型“数据库”，专门给前端页面存数据的。

index.html 里有一段 HTML 结构：

html

<ul class="plates">    <li>Loading Tapas...</li></ul><form class="add-items">    <input type="text" name="item" placeholder="Add a new tapas" required>    <input type="submit" value="+ Add Item"></form>

这是一个典型的待办清单界面。用户输入内容，点击提交，数据通过 localStorage 保存在浏览器里。这就是前端存储最直接的应用场景。

本地存储：localStorage 是什么？

localStorage 是浏览器提供的 键值对存储，以字符串形式保存在浏览器中，数据不会过期。

它的核心 API 只有五个：

javascript

// 存数据localStorage.setItem('key', 'value');// 取数据const data = localStorage.getItem('key');// 删数据localStorage.removeItem('key');// 清空localStorage.clear();// 遍历for (let i = 0; i < localStorage.length; i++) {    const key = localStorage.key(i);    console.log(key, localStorage.getItem(key));}

特点：

• 容量约 5-10MB

• 数据以字符串存储（对象需要 JSON.stringify 序列化）

• 同源策略：同域名下共享

• 同步操作，会阻塞主线程

  
  

适用场景：用户偏好设置、临时缓存、离线数据（如待办清单）。

浏览器缓存：为什么第二次打开那么快？

localStorage 是“持久化存储”，而浏览器缓存是“临时加速器”。

当你第一次访问一个页面时，浏览器会下载 HTML、CSS、JS、图片等资源。第二次访问时，浏览器会检查这些资源是否过期，如果没有过期，直接从硬盘里读取，不用再发请求。

这就是为什么第二次打开页面快得多。

缓存的控制方式：

• 强缓存：通过 Cache-Control 和 Expires 响应头控制过期时间。

• 协商缓存：通过 ETag 和 Last-Modified 验证资源是否有更新。

  
  

前端开发经常遇到“改了代码，刷新没生效”，就是因为强缓存还没过期。解决方案：给资源 URL 加版本号（如 common.js?v=2），强制浏览器重新加载。

MySQL vs Redis：硬盘 vs 内存

MySQL：永久存储，但慢

MySQL 是关系型数据库，数据存在硬盘上。优点是持久性强——断电数据不丢。缺点是速度慢，因为硬盘 I/O 有物理限制。

MySQL 本身已经是非常优秀的数据库，但相对于我们的代码来说，它还是慢。

Redis：内存缓存，但会丢

Redis 是键值对缓存数据库，数据存在内存里。优点是极快，缺点是断电即失——重启后数据消失。

典型用法：第一次从 MySQL 读取文章列表后，把结果存在 Redis 中。后续请求直接从 Redis 读取，不用再查 MySQL，大幅提升性能。

这就是  “缓存”  的核心思想：把高频读的数据放在最快的地方。

云存储与文件系统

文件系统（本地存储）

在前端项目中，文件系统指浏览器提供的本地存储 API（localStorage、sessionStorage、IndexedDB）。

云存储

云存储（如阿里云 OSS、AWS S3）是把文件存在远端服务器上。前端通过 URL 访问图片、视频、静态资源，是大型项目的标配。

LLM 的存储：嵌入向量数据库

存储的最后一种形态，是 LLM 的向量存储。

大模型训练后产生的神经网络本身就是一个巨大的向量存储空间。Embedding 向量（如 1024 维的语义坐标）存储在模型内部，构成了一本“语义字典”。

预训练产生的神经网络本身就是一个大型的向量存储，LLM 可以说是数据智能。

当用户输入“中国的首都是”，模型通过向量查找和注意力计算，找到与“中国”“首都”语义最接近的“北京”，这就是存储 + 检索的过程。

与传统数据库不同，向量存储存的是“语义坐标”而非“原始文本”。这也是为什么 LLM 能“理解”语义——它靠的是向量空间中的距离计算，不是关键词匹配。

一点总结

存储的本质是 速度、容量、持久性的三角博弈。没有“最好的存储”，只有“最适合场景的存储”。

互动讨论

1. localStorage 能存对象吗？  如果不能，怎么解决？

   
   

2. 浏览器缓存中，Cache-Control 和 ETag 分别控制什么？  它们是替代关系还是互补关系？

   
   

3. Redis 重启后数据丢失，但为什么很多公司仍然用它？  它解决了什么问题？

   
   

4. IndexedDB 和 localStorage 的主要区别是什么？  什么时候应该用 IndexedDB？

   
   

5. LLM 的向量存储和传统数据库的索引有什么区别？  为什么向量存储能“理解语义”？

   
   

📌 一点心得：存储没有银弹。localStorage 适合小数据，MySQL 适合核心数据，Redis 适合缓存，向量数据库适合语义检索。理解每种存储的“定位”，比死记硬背 API 重要一百倍。