🎶 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 评论
Eddie • 2018-12-24
回复 删除

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

Vanessa • 2018-12-24
回复 删除

可以操作 cookie 呀

Eddie • 2018-12-24
回复 删除

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

Vanessa • 2018-12-24
回复 删除

😄 我最喜欢了

ronger • 2018-12-24
回复 删除

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

Vanessa • 2018-12-24
回复 删除

比如说回贴的输入框用 localStorage 存储输入内容,https://medium.com/s/story/we-need-to-start-seeing-powerful-men-for-what-they-are-e5ce79a226a9 这个页面的👏就可以使用 sessionStorage 减轻服务器压力。

Eddie • 2018-12-24
回复 删除

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

linker • 2018-12-24
回复 删除

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

Eddie • 2018-12-24
回复 删除

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

Vanessa • 2018-12-24
回复 删除

平板宽度小了吧

lwl • 2018-12-24
回复 删除

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

Eddie • 2018-12-24
回复 删除

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

Vanessa • 2018-12-24
回复 删除

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

zjhch123 • 2018-12-24
回复 删除

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

Vanessa • 2018-12-24
回复 删除

用 Cache Storage,Application Cache,IndexedDB,Web SQL