OneYoung

Appearance

HTML5 引入了 Web Storage（ localStorage 和 sessionStorage ）和 IndexedDB，允许在客户端本地存储数据，从而实现离线访问和更高效的数据存储。

3-1.Web Storage ​

Web Storage 包含两种机制：

  1. sessionStorage 为每一个给定的源（origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。
  • 仅为会话存储数据，这意味着数据将一直存储到浏览器（或选项卡）关闭。
  • 数据永远不会被传输到服务器。
  • 存储限额大于 cookie（最大 10MB）。
  1. localStorage 做同样的事情，但即使浏览器关闭并重新打开也仍然存在。
  • 存储的数据没有过期日期，只能通过 JavaScript、清除浏览器缓存或本地存储的数据来清除。
  • 存储限额大于 cookie（最大 10MB）。

TIP

隐私窗口、隐身模式和类似名称的隐私浏览选项不会存储历史记录和 cookie 等数据。

在隐身模式下，localStorage 被视为 sessionStorage。

存储 API 仍然可用且功能齐全，但是当浏览器或浏览器选项卡关闭时，所有存储在隐私窗口中的数据都会被删除。

3-1-1.sessionStorage ​

sessionStorage 属性允许你访问一个，对应当前源的 session Storage 对象。

它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。

在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点和 session、cookie 的运行方式不同。

打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage。

关闭对应浏览器标签或窗口，会清除对应的 sessionStorage。

js
// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value')

// 从 sessionStorage 获取数据
sessionStorage.getItem('key')

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key')

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear()

3-1-2.localStorage ​

localStorage 允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。

localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除。

应注意，无论数据存储在 localStorage 还是 sessionStorage ，它们都特定于页面的协议。

另外，localStorage 中的键值对总是以字符串的形式存储。 (需要注意，和 js 对象相比，键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型)。

js
// 保存数据到 localStorage
localStorage.setItem('key', 'value')

// 从 localStorage 获取数据
localStorage.getItem('key')

// 从 localStorage 删除保存的数据
localStorage.removeItem('key')

// 从 localStorage 删除所有保存的数据
localStorage.clear()

3-2.IndexedDB ​

笔者暂无使用场景，待定整理研究。