HTML5 Web应用本地存储技术详解：localStorage、sessionStorage 与 IndexedDB

基础知识

1️⃣ 什么是HTML5本地存储？

HTML5本地存储是一种允许Web应用程序在用户浏览器端本地保存数据的技术，无需依赖服务器。它增强了Web应用的离线功能、个性化设置保留以及性能优化。

通过本地存储，开发者可以将关键信息、用户偏好、临时状态等数据安全地保留在用户的设备上，实现更快的加载速度、更好的用户体验以及部分离线功能。

2️⃣ 主要本地存储技术

1) Web Storage API

localStorage （永久存储）

• 持久化： 数据一旦写入，除非通过 JavaScript 手动清除，否则会一直保存在用户的浏览器中，即使关闭浏览器或重启电脑也不受影响。
• 容量： 大多数现代浏览器为localStorage分配约 5MB 的存储空间，具体限制可能因浏览器而异。
• 同源策略： 数据按源（协议、域名、端口）隔离，同一源下的所有页面都能访问同一份