浅谈cookie、sessionStorage、localStorage的生命周期

最近忙于毕业设计，要写一个用户行为分析平台，需要合理使用这三种技术来追踪用户行为，于是查询相关资料并做了些小测试来熟悉这三种技术。我将自己学习内容和使用时遇到的一些小细节在此做个总结。

众所周知，sessionStorage和localStorage是H5的新特性，和cookie一样都可以在客户端存储一些数据，他们的区别在于：

1. localStorage的生命周期是永久的，如果不主动使用以下方法清除，存储的数据将一直被保存 

   localStorage.removeItem('key');
   localStorage.clear();  // 清除全部

2. sessionStorage顾名思义周期是一个session，窗口关闭后存储的数据将被清空。可以理解为生命周期在一个标签页内，只要这个标签页不关闭，无论你刷新了这个页面，还是在里面做了跳转，sessionStorage都不会清除
3. cookie的大小限制为4KB左右，会默认随着请求发送到后端，如果不设置过期时间，cookie默认的生命周期是到浏览器关闭，注意是浏览器关闭而不是页面的关闭，因此在一个浏览器未关闭的情况下，如果我们关闭了页面在再重新打开，之前的cookie仍然存在。

在了解了上面我们随处都可以找到的总结后，我再说一些我实际遇到的小细节。

同源策略

以csdn博客首页blog.csdn.net为例，我们打开浏览器控制台

如下图我们使用localStorage存储了一个 a : '1' 的键值对，这时我们随便打开一篇博客进入到同域的另一个标签页，为什么要同域，因为无论是cookie还是sessionStorage和localStorage，他们都受同源策略限制，都如同ajax那样不能跨域通信。

页面1 页面2

不同域的页面

如上图，我们在页面 blog.csdn.net（页面1）中使用localStorage存入了一条数据，在同域的另一个页面 blog.csdn.net/xxx（页面2）中可以成功获取，而在不同域的页面download.csdn.net却获取不到，即便是主域相同的不同子域。同理，cookie和sessionStorage也是如此。

作用域

然后我们就可以 搞事 测试了，首先我们将页面1里localStrorage的a的值改为2，发现页面2里的a也随之更改为了2，可以得知

• 不同页面的localStorage共享一个作用域，能互相影响。

页面1 页面2

• 可以测试，cookie也是如此，

 

sessionStorage呢？我们来试试，我们首先关闭原先的页面2，并随便打开一篇博客在页面1里设置了sessionStorage，然后重新随便打开一篇博客进入页面2，可以成功获取到b : '1'

页面1  页面2

接着我们修改页面1里的b，如下图，我们会发现，页面2里的b并没有改变，这个应该是合理的结果，因为我们之前说到sessionStorage的生命周期在一个标签页内，所有只有作用域在一个标签内才不会影响到其他标签页。而从页面1新建标签页打开页面2时，会复制一份sessionStorage给到页面2，这也就是为什么在一开始页面2可以获取到页面1的sessionStorage。而localStorage作用域是共享的，所以也就不存在复制过程。

• 不同页面的sessionStorage有独立的作用域，互不影响。跳转页面时会复制一份sessionStorage。

页面1 页面2

 

再做个钻牛角尖的测试：

还是以csdn的博客首页 blog.csdn.net （页面1）为例，设置sessionStorage c :'1'，然后点击左侧关注按钮会在当前标签页内跳转到页面blog.csdn.net/nav/watchers（页面2），不出所料的可以得到 c : '1'

页面1 页面2

接着我们在页面2里更改sessionStorage c : '2'，然后点击后退按钮回到原来的页面1，我们发现，sessionStorage也被改变了，这是因为尽管他们属于不同的页面，但由于后退其实相当于在这个标签页里面重新打开了原先的页面，所有也会有一个复制过程，看上去就像原页面的sessionStorage被改变了一样。

页面2 页面1

 

第一次写博客，旨在分享一下心得，欢迎留言~