目录
- Web Storage API 的概念与用法
- Web Storage API 接口
- Web Storage API 示例展示
Web Storage API 的概念与用法
Web Storage API 为我们提供了两种在客户端存储数据的机制：
- sessionStorage：
- 在页面会话期间（只要浏览器保持打开，包括页面重新加载和恢复）为每个源维护一个独立的存储区域。
- 仅存储当前会话的数据，这意味着数据会一直保留，直到浏览器或标签页被关闭。
- 数据永远不会传输到服务器。
- 存储限制比 cookies 更大（最大 5MB）。
- localStorage：
- 即使在浏览器关闭并重新打开后，数据依然存在。
- 存储的数据没有过期时间，只能通过 JavaScript 或清除浏览器缓存/本地存储数据来清除。
- 存储限制大于 sessionStorage。
我们可以通过 INLINECODE6a179883 和 INLINECODE80198016 属性访问这两种机制。调用这些属性之一会创建一个 Storage 对象的实例，允许我们设置、检索和删除数据项。
Web Storage API 接口
- Storage: 它提供对特定本地存储的访问。
- Window: 它是一个包含 DOM 文档的窗口。
- StorageEvent: 它由存储事件实现，当存储区域发生变化时，该事件会被发送到窗口。
Web Storage API 示例展示
1. 使用 sessionStorage setItem 方法：
示例: 在本例中，我们将使用 sessionStorage setItem 方法存储数据，并使用 sessionStorage getItem 方法检索它们。
HTML
CODEBLOCK_6e9c18af
输出结果:
!session1session1
Session Storage 文件的输出结果:
!session11sessionStorage
2. 使用 localStorage setItem 方法：
示例: 在本例中，我们将使用 localStorage setItem 存储数据，并使用 getItem 方法检索它们。
HTML
CODEBLOCK_215a6b3f
输出结果:
Local storage 的输出结果:
总而言之，Web Storage API 简化了数据的存储和检索，使其成为 Web 开发者手中的利器。请记住要明智地使用它，并考虑到存储限制和安全影响。
支持的浏览器:
- Chrome
- Edge
- Firefox
- Safari
- Opera