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

2018-12-24

回答

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

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

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

• 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 秒