前言

HTML5新增的新特性在实际开发中体现的优势已经不言而喻。

今天这篇文章我们主要讲解HTML中新增的与本地存储有关的localStorage和sessionStorage两种API，在之前的一篇文章《HTML5新特性之localStorage与sessionStorage使用技巧》中，已经讲解过它们的相关算法。

今天我们就来细看下HTML5新增的localStorage和sessionStorage的理论知识点，这在前端面试中基本是必问的问题，一定要好好看下。

HTML5

Cookie

在讲解localStorage和sessionStorage之前，我们可以先看下Cookie，Cookie同样是用于本地存储对象的，随着HTTP协议诞生至今。

cookie

其实在浏览器端已经有了Cookie用于本地存储数据，为什么还要在HTML5中新增localStorage和sessionStorage两个API呢？那么我们就先来看看Cookie具有的一些特性吧。

• Cookie一般存储与服务端交互的信息，由于数据量小，一般不超过4KB大小。

• Cookie在请求发起后，不管服务端需不需要Cookie值，都会随着请求头发送至服务器端，造成了不必要的带宽了浪费。

• Cookie有效时间是随意设置的，可能很短至几分钟，也有可能很长至几个月，具有不确定性。

既然Cookie有诸多限制，那么Cookie是否能被HTML5的本地存储新特性所代替呢？

当然也是不能的。

Cookie作为HTTP协议的一部分，有其存在的重要意义，是无法代替的。

我们可以这样理解，HTML5中新增的localStorage和sessionStorage是对本地存储功能的扩充。主要解决的就是本地存储数据量小的问题。

localStorage和sessionStorage

localStorage和sessionStorage作为HTML5新增的特性之一，已经被广泛用于实际开发中。

其中两者的API都很简单

• 通过setItem(), getItem()方法去设置和获取本地存储。

• 通过removeItem()方法来清除某个特定的变量缓存。

• 通过key()获取所有的本地缓存的key集合。
  

• 通过clear()清空本地缓存。

API上的细节大家可以自行看文档，这里就不赘述了。

为什么HTML5会新增localStorage和sessionStorage两种新的API呢？想必它们肯定是有差异的。

• 作用域

同源页面（同协议，同域名，同端口号）下的不同页面之间共享localStorage信息，而不同页面之间不能共享sessionStorage信息。

注意：如果一个标签页包含多个iframe，它们是可以共享sessionStorage的。

我们通过以下示例来看看。

首先我们在Page1的localStorage与sessionStorage中添加值。

添加值

然后我们看看浏览器效果。在Chrome开发者工具的Application面板下可以看见localStorage与sessionStorage栏。

localStorage与sessionStorage存储

从上图可以看出在sessionStorage与localStorage中都已经添加进信息。

然后我们再打开同源下的另一个页面Page2，再看看Chrome控制台下的效果。

另一个页面下的存储信息

从上图中我们可以看出，Page2的localStorage中仍然有信息，而sessionStorage为空，这就证明了同源下的不同页面是不能共享sessionStorage信息的。

• 数据生命周期

localStorage中的数据在同源下所有tab页中共享，只要不手动清除，会永久存在于本地缓存中。

sessionStorage中的数据只能存在于单个页面下共享，只要当前标签页关闭，sessionStorage中的信息就会被清空。

localStorage与Cookie对比

localStorage与sessionStorage的区别已经讲解完毕，接下来就看看localStorage与Cookie的差别吧。

• localStorage中的信息只是存在本地浏览器端的，不会自动随着HTTP请求发送到后端，除非手动通过代码控制；Cookie中的信息会随着同源的HTTP请求发送到服务端。

• localStorage存储大小一般会达到几M，不同浏览器会有所差异，通过上篇文章的算法，得知Chrome下是5M，safari下是2M；而Cookie的大小一般为4K，相比之下，localStorage的存储要比Cookie大得多。

• localStorage中的信息只要在不清空的情况下，会一直存在本地；Cookie的有效期是有限的，有默认值，也可以手动设定，并且跟窗口无关。

• 可以给localStorage设置监听storage事件，做数据变更的后续处理。

结束语

本篇文章主要介绍了localStorage与sessionStorage和Cookie之间的区别，大家需要好好消化，以便在面试时遇到这样的问题能够轻松回答上来。