浅谈cookie、sessionStorage、localStorage的生命周期
最近忙于毕业设计,要写一个用户行为分析平台,需要合理使用这三种技术来追踪用户行为,于是查询相关资料并做了些小测试来熟悉这三种技术。我将自己学习内容和使用时遇到的一些小细节在此做个总结。
众所周知,sessionStorage和localStorage是H5的新特性,和cookie一样都可以在客户端存储一些数据,他们的区别在于:
localStorage的生命周期是永久的,如果不主动使用以下方法清除,存储的数据将一直被保存
localStorage.removeItem('key');
localStorage.clear(); // 清除全部
sessionStorage顾名思义周期是一个session,窗口关闭后存储的数据将被清空。可以理解为生命周期在一个标签页内,只要这个标签页不关闭,无论你刷新了这个页面,还是在里面做了跳转,sessionStorage都不会清除
cookie的大小限制为4KB左右,会默认随着请求发送到后端,如果不设置过期时间,cookie默认的生命周期是到浏览器关闭,注意是浏览器关闭而不是页面的关闭,因此在一个浏览器未关闭的情况下,如果我们关闭了页面在再重新打开,之前的cookie仍然存在。
在了解了上面我们随处都可以找到的总结后,我再说一些我实际遇到的小细节。
同源策略
以csdn博客首页blog.csdn.net为例,我们打开浏览器控制台
如下图我们使用localStorage存储了一个 a : '1' 的键值对,这时我们随便打开一篇博客进入到同域的另一个标签页,为什么要同域,因为无论是cookie还是sessionStorage和localStorage,他们都受同源策略限制,都如同ajax那样不能跨域通信。
不同域的页面
如上图,我们在页面 blog.csdn.net(页面1)中使用localStorage存入了一条数据,在同域的另一个页面 blog.csdn.net/xxx(页面2)中可以成功获取,而在不同域的页面download.csdn.net却获取不到,即便是主域相同的不同子域。同理,cookie和sessionStorage也是如此。
作用域
然后我们就可以 搞事 测试了,首先我们将页面1里localStrorage的a的值改为2,发现页面2里的a也随之更改为了2,可以得知
不同页面的localStorage共享一个作用域,能互相影响。
sessionStorage呢?我们来试试,我们首先关闭原先的页面2,并随便打开一篇博客在页面1里设置了sessionStorage,然后重新随便打开一篇博客进入页面2,可以成功获取到b : '1'
接着我们修改页面1里的b,如下图,我们会发现,页面2里的b并没有改变,这个应该是合理的结果,因为我们之前说到sessionStorage的生命周期在一个标签页内,所有只有作用域在一个标签内才不会影响到其他标签页。而从页面1新建标签页打开页面2时,会复制一份sessionStorage给到页面2,这也就是为什么在一开始页面2可以获取到页面1的sessionStorage。而localStorage作用域是共享的,所以也就不存在复制过程。
不同页面的sessionStorage有独立的作用域,互不影响。跳转页面时会复制一份sessionStorage。
再做个钻牛角尖的测试:
还是以csdn的博客首页 blog.csdn.net (页面1)为例,设置sessionStorage c :'1',然后点击左侧关注按钮会在当前标签页内跳转到页面blog.csdn.net/nav/watchers(页面2),不出所料的可以得到 c : '1'
接着我们在页面2里更改sessionStorage c : '2',然后点击后退按钮回到原来的页面1,我们发现,sessionStorage也被改变了,这是因为尽管他们属于不同的页面,但由于后退其实相当于在这个标签页里面重新打开了原先的页面,所有也会有一个复制过程,看上去就像原页面的sessionStorage被改变了一样。