HTML5 存储，也称为Web 存储，是一种功能，与传统 cookie 相比，它允许网站以更高效、更安全的方式将数据存储在客户端（在用户的浏览器中）。 

它为 Web 开发人员提供了两种主要类型的存储：localStorage和sessionStorage，它们分别允许数据在会话之间持久保存或在浏览器关闭时被清除。 

什么是 HTML5 存储？ 

HTML5 存储是一组网络技术，旨在提供一种在用户浏览器本地存储数据的方法。与每次 HTTP 请求时将数据发送到服务器的 Cookie 不同，HTML5 存储将数据保存在客户端，这可以提高性能并减少服务器负载。 

主要特点 

• 数据持久性：HTML5 存储允许数据在浏览器会话之间持久保存，具体取决于所使用的存储类型。 

• 更大的存储限制：与通常限制为 4 KB 的 cookie 不同，HTML5 存储允许更大的存储容量（通常为 5-10 MB）。 

• 无数据传输：使用 HTML5 存储存储的数据不会在每次请求时发送到服务器，因此比 cookie 更高效。 

HTML5 存储类型 

1. 本地存储

• 持久存储：使用 localStorage 存储的数据即使在浏览器关闭并重新打开后仍然可用。 

• 范围：仅可由设置它的域访问（同源策略）。 

• 用例：非常适合存储用户偏好、主题设置或其他持久配置。 

2. session存储

• 临时存储：当浏览器选项卡或窗口关闭时，使用 sessionStorage 存储的数据会被清除。 

• 范围：仅限于当前浏览器选项卡或窗口，并且不跨不同选项卡共享。 

• 用例：适用于存储与特定会话相关的数据，例如临时表单输入或用户导航历史记录。 

HTML5 存储的工作原理 

HTML5 存储是使用 JavaScript 实现的，并提供了设置、检索和删除浏览器中存储的数据的方法。 

localStorage 的使用示例 

// 存储数据 
localStorage.setItem('username', 'JohnDoe');  
 
// 检索数据 
let user = localStorage.getItem('username');  
console.log(user); // 输出：JohnDoe  
 
// 删除数据 
localStorage.removeItem('username'); 
 

sessionStorage 的使用示例 

// 存储数据 
sessionStorage.setItem('loginStatus', 'loggedIn');  
 
// 检索数据 
let status = sessionStorage.getItem('loginStatus');  
console.log(status); // 输出：loginIn  
 
// 删除数据 
sessionStorage.removeItem('loginStatus'); 
 

HTML5存储的优势 

1. 性能改进

HTML5 存储完全在客户端运行，无需重复向服务器发出请求来存储和检索数据。这样可以缩短加载时间并减少服务器负载。 

2. 增加存储限制

与最大存储限制约为 4 KB 的 cookie 相比，HTML5 存储允许存储大量数据（通常为 5-10 MB）。 

3. 简化数据管理

localStorage 和 sessionStorage 的 JavaScript API 提供了存储、检索和删除数据的直接方法。 

限制和注意事项 

1. 浏览器兼容性

大多数现代网络浏览器都支持 HTML5 存储，但确保与旧版浏览器或可能禁用 HTML5 功能的特定配置的兼容性非常重要。 

2. 存储限制

尽管 HTML5 存储比 Cookie 提供更多空间，但它仍然有限制。不同的浏览器具有不同的存储配额，通常每个来源的存储配额为 5 MB 到 10 MB。 

3. 数据安全

HTML5 存储中存储的数据可通过 JavaScript 访问，这意味着如果攻击者利用跨站点脚本 (XSS) 漏洞，他们可能能够访问存储的数据。务必避免存储密码或付款详细信息等敏感信息。 

4. 无服务器端访问

由于 HTML5 存储在客户端运行，因此如果不明确发送数据，则无法从服务器访问数据。对于需要服务器端存储的场景，cookie 或数据库解决方案更合适。 

HTML5 存储与 Cookie 

HTML5 存储的使用案例 

1. 存储用户偏好 

1. • 记住暗/亮模式设置、语言偏好或布局配置。 

2.保存表单数据 

• • 使用 sessionStorage 临时保存表单输入以避免数据丢失。 

3. 客户端缓存 

1. • 缓存数据以减少服务器请求，例如 API 响应。 

4. 跟踪应用程序状态 

1. • 在页面重新加载时保持单页应用程序 (SPA) 的状态。