🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

什么是 HTML5 存储?解释一下 `localStorage` 和 `sessionStorage`

2018-12-24

回答

在 HTML5 中,页面可以在用户的浏览器中存储本地数据。这些数据以 name/value 的格式进行存储,且只能被存储该数据的网页访问。
localStoragesessionStorage 中存在生命周期的差异

  • 通过 localStorage 存储的数据是持久化的:他不会过期,可以一直存储在用户的电脑上,除非 web 应用程序删除他或用户使用了浏览器中相关的缓存清除功能。
  • sessionStorage 存储数据的生命周期和顶层窗口或浏览器标签页的一样。当标签页被永久关闭,通过 sessionStorage 存储的数据也将被删除。

localStoragesessionStorage 的存储范围也存在差异:两种存储的范围都和文档域相关,因此不同域中的文档将不能共享存储的对象。

  • sessionStorage 的范围是基于每一个窗口的。同一个页面被浏览器的两个标签页打开,这两个标签页中的 sessionStorage 数据是互相独立的。
  • 不同于 localStorage,当打开不同的标签页时,同域相同的脚本都不能访问彼此页面中的 sessionStorage

加分回答

  • 早期,这些都是由 cookie 完成的。但 cookie 并不适合大量数据的存储,因为它们会通过对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
  • HTML5 存储限制比 cookie 要大得多(至少5MB)且速度也更快。
  • HTML5 存储的数据永远都不会传输到服务器端,只有在客户端调用存储 API 时才能使用。
  • localStorage 的使用方式如下:
if (localStorage.pagecount) {
  localStorage.pagecount = Number(localStorage.pagecount) +1;
} else {
  localStorage.pagecount = 1;
}
console.log(localStorage.pagecount)
  • sessionStorage 的使用方式如下:
if (sessionStorage.pagecount) {
  sessionStorage.pagecount = Number(sessionStorage.pagecount) +1;
} else {
  sessionStorage.pagecount = 1;
}
console.log(sessionStorage.pagecount)

返回总目录

每天 30 秒


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

19 评论
wizardforcel • 2018-12-25
回复 删除

webstorm的智能提示表示你这个if可以用||折叠。。。

longting • 2018-12-25
回复 删除

优秀

Tanken • 2018-12-26
回复 删除

借楼记笔记:

Web Storage(例如 LocalStorage 和 SessionStorage)是同步的,不支持网页工作线程,并对大小和类型(仅限字符串)进行限制。 Cookie具有自身的用途,但它们是同步的,缺少网页工作线程支持,同时对大小进行限制。WebSQL 不具有广泛的浏览器支持,因此不建议使用它。File System API 在 Chrome 以外的任意浏览器上都不受支持。目前正在File and Directory Entries APIFile API规范中改进File API,但该 API 还不够成熟也未完全标准化,因此无法被广泛采用。

https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa?hl=zh-cn


Application Cache

👎 已废弃
该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。

⚠ 在此刻使用这里描述的应用程序缓存功能高度不鼓励; 它正在处于从Web平台中被删除的过程。请改用Service Workers代替。事实上,在Firefox 44中,当AppCache用于为页面提供离线支持时,控制台中现在显示一条警告消息,建议开发人员改用 Service workers代替 (bug 1204581)。

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Using_the_application_cache


IndexedDB

IndexedDB是一种低级API,用于客户端存储大量结构化数据(包括, 文件/ blobs)。该API使用索引来实现对该数据的高性能搜索。虽然Web Storage对于存储较少量的数据很有用,但对于存储更大量的结构化数据来说,这种方法不太有用。IndexedDB提供了一个解决方案。

这是MDN IndexedDB覆盖面的主要着陆页 - 这里,我们提供了完整的API参考和使用指南, 浏览器支持细节,以及关键概念的一些解释的链接。

📄 Note: 此特性在Web Worker中可用。

📄 注意:IndexedDB API是强大的,但对于简单的情况可能看起来太复杂。如果你更喜欢一个简单的API,请尝试类库,如localForagedexie.js, 和 ZangoDB,使IndexedDB更方便用户。

https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API


darknesschaser • 2019-01-02
回复 删除

你要不试试base64?