Cookie和StorageAPI区别与详解

它们都是浏览器数据存储的方案，是用于解决数据持久化的问题。除此之外数据也可以存储在内存中（比如挂载到window等全局对象下），但这种方式每当页面刷新就会丢失。

下面分别从几个方面，详细地介绍Cookie、sessionStorage、localStorage的区别。

需要注意的是其中Cookie的空间大小指的是name、value以及=号。

另外这三个不同浏览器下可能会有细微的差异，可忽略。

下表为网上收集（非当前实测结论），看一眼知道有限制这回事就好。

鉴于各浏览器对Cookie的空间、数量限制不完全相同，为了较好地兼容，建议如下：

没错面试官问到这么说吧，应该就OK了。

另外与超出空间限制不同的是，超出数量限制之后，是可以继续添加Cookie的，但不同浏览器有不同的策略：一些是替换掉最先（老）的Cookie，有些则是随机替换。作简单了解就好，一般项目不会设那么多的，而且Cookie过期浏览器是会自动清除的。

这块内容比较多...

铺垫-了解同源和同站的区别

区别如下：

铺垫-顶级域名和二级域名的认知

关于顶级域名、二级域名，也有很多认知问题。

在国内很多资料认为，顶级域和一级域是分开的。比如.baidu.com，如果按照这种方式划分，那么.com是顶级域名，.baidu.com就是一级域名。好像阿里云就是这样定义的。

而我更偏向于认为，.baidu.com属于二级域名。不用过分纠结，在团队内统一即可。

eTLD（Top-LevelDomains）表示有效顶级域名，那么eTLD+1就表示二级域名。例如：

其中eTLD是.com.cn，那么eTLD+1就是.example.com.cn。关于eTLD更多请看这里。

铺垫-区分同源和同站

先看下完整的URL（网址）构成如下：

简单来说只要二级域名相同，就属于同站。同源则要求更严格。因此同源一定同站，反之则不一定。

以下例子同站，但不同源。

正题-三者的作用域

理解这些很重要，为什么这么说呢？

拓展-作用域引发的问题

很多公司不是每个Web项目对应一个三级域名。

这些都很常见，那么问题来了。它们很多都是同源、同站的。假设按小项目划分场景，我在a项目中设置了一个sessionStorage会话级缓存，那么当前从a项目跳转至b项目时，b是可以获取到a项目的所有sessionStorage的，反之也成立。如果a和b项目中某个sessionStorage的key不小心设置成相同的话，那很可能就会影响到对方。localStorage同理。至于Cookie的话，由于它的空间限制最大只允许4K，因此不适宜存过多数据，一般会存一些像鉴权信息等比较多。同个公司业务的用户鉴权等是相似的，所以Cookie的访问机制也不会有太大的影响。

针对这些问题，建议是非必要的话，将数据存在内存中，比如用Vuex、Redux、MobX等状态管理工具来维护应用的状态。一是信息更不容易暴露，而是可以减少IO的读写。但是这样的话，就要解决数据持久化的问题，因为在内存中的话，只要刷新页面就会丢失。怎么解决？

以Redux为例，在创建Store时，是可以传入一个初始状态的，它的值取下面这个会话缓存即可。只要监听到状态发生变化变化，并设置或更新sessionStorage级别的缓存，将状态缓存起来即可。比如：

注意-sessionStorage鲜为人知的点（冷门）

下面例子均在同源情况下。假设有两个同源页面：A页面、B页面对应URL为page_a_url、page_b_url。

示例一：

示例二：将上述第二步改成下面这样：

结果又是什么呢？直接看下结果：

结论：

总结-作用域

sessionStorage和localStorage不会主动参与与服务器的通信。

Cookie是保存在浏览器上的一小型文本文件。在每次与服务器的通信中都会携带在HTTP请求头之中。

Q1：storage事件的迷惑行为

首先注册storage事件监听器，它只能监听其他同源页面的缓存发生改变时，它才会被触发。

得出几个结论：

Q2：当localStorage超过5M的空间限制之后，若再次setItem会怎样？

答案显而易见，这次setItem()将会失败，且会抛出错误。针对这种情况，可以做一些处理，比如清空再重新记录等...

Q3：在Safari无痕模式下，对sessionStorage操作可能会抛出异常

请看这个帖子：html5localStorageerrorwithSafari:QUOTA_EXCEEDED_ERR:DOMException22:Anattemptwasmadetoaddsomethingtostoragethatexceededthequota.

Q4：sessionStorage在iframe的问题

前面提到顶级窗口和iframe窗口的页面都是同源的情况下，sessionStorage是可共享的。但不完全是比如受iframe的sandbox属性影响，分为两种情况：

假设两个页面同源；情况一sessionStorage不共享，在iframe中是一个全新的sessionStorage对象。情况二则共享sessionStorage。