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

本贴最后更新于 1443 天前,其中的信息可能已经沧海桑田

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` 的使用方式如下:
  ```javascript
if (sessionStorage.pagecount) {
    sessionStorage.pagecount = Number(sessionStorage.pagecount) +1;
} else {
    sessionStorage.pagecount = 1;
}
console.log(sessionStorage.pagecount)

返回总目录

每天 30 秒

  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 383 回帖
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    103 引用 • 297 回帖
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    317 引用 • 1392 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • Eddie
    捐赠者

    可惜服务器无法操作这个。

    1 回复
  • Vanessa
    订阅者 作者

    可以操作 cookie 呀

    1 回复
  • Eddie
    捐赠者

    有我们控制不了的东西,不喜欢。

    1 回复
  • Vanessa
    订阅者 作者

    😄 我最喜欢了

    1 回复
  • ronger
    捐赠者 支持者 订阅者

    请分别介绍下 localStoragesessionStorage 使用场景 😄

    2 回复
  • Vanessa
    订阅者 作者

    回贴的输入框用 localStorage 存储输入内容
    https://medium.com/s/story/we-need-to-start-seeing-powerful-men-for-what-they-are-e5ce79a226a9 这个页面的 👏 就可以使用 sessionStorage 减轻服务器压力。前后端分离的也可以用 sessionStorage 记录 token。

  • Eddie
    捐赠者

    比如那种分步注册的那种,填到第二步发现少了什么照片没有办法上传,没法继续了下去,这个时候这种数据如果保存在数据库上又不好,因为不是长时间保存,只是为了他下次回来填的时候可以自动回填上次的内容,这个可能就是几秒钟的时间。保存在 localStorage 的话就非常好了,服务器没有负担,体验也好,不用浪费时间重复填一遍。不好就是只能在本机上。另外保存在浏览器上,敏感数据的话不太好。

  • linker
    订阅者

    localStorage 容易被 js 访问,没有 cookie 的 httponly 选项,会有 CSRF 风险。需要小心使用。

  • Eddie
    捐赠者

    我想起京东首页一个 bug,移动设备的判断,京东首页前端用 js 判断 width,但是服务器是用 user-agent 来判断的,到了平板访问的时候,就在 m.jd.com 和 www.jd.com 之间不停来回的跳转。疯了。

    1 回复
  • Vanessa
    订阅者 作者

    平板宽度小了吧

  • someone9891
    捐赠者

    localStorage 和 sessionStorage 里面 存的东西可以在客户端被篡改吗?我知道 cookies 是可以的,以前用过 localStorage,但是那时候没有 关注这个。cookies 以前也没留意,直到有人在页面修改了我存在 cookies 里面的 roleId ……
    还好当时用的 vue ,立马放到 vuex 里面了

    2 回复
  • Eddie
    捐赠者

    cookies 要加密的。听说以前阿里的一些数据也加密保存在 cookies 上,一发现有人修改,马上清空数据。还是保存在 session 上比较好,只有 cookies 里面的 sessionID 不被偷。设置好超时时间。保存在 session 上要消耗服务器内存,在线用户比较多的话开销很惊人,而且分布式服务器下还要设置好 session 共享的问题。cookies 的话每次请求都要带上 cookies,数据传输量增多了。

  • Vanessa
    订阅者 作者

    为 cookie 添加 secure 属性应该就可以避免了

  • zjhch123

    有什么办法能用将超过 5M 的图片之类的东西存进 localStorage 吗……

    2 回复
  • Vanessa
    订阅者 作者

    用 Cache Storage,Application Cache,IndexedDB,Web SQL

  • longting

    优秀

  • iTanken
    捐赠者

    借楼记笔记:

    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)。

    使用应用缓存 - HTML(超文本标记语言) | MDN


    IndexedDB

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

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

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

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


  • darknesschaser

    你要不试试 base64?

请输入回帖内容 ...
Vanessa
我们终此一生,就是要摆脱他人的期待,找到真正的自己。 昆明