欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

关于Cookie、localStroage和sessionStorage的小结

程序员文章站 2022-05-23 17:36:42
...

今天和大家聊一聊有关Cookie、localStroage、sessionStorage在日常开发中会经常用到的，所以和大家简单分享一下。

一、Cookie

Cookie: HTTPCookie一般直接称之为cookie,最初是用来存储会话信息的，由HTTP服务器设置，然后保存在浏览器中，目前已近成为了一种标准。由于HTTP协议是一种无状态协议，在前端请求服务器对任何HTTP请求都需要携带cookie,其中包含着会话信息。

特点：

  1.     cookie在性质上是绑定在特定域名之下的，是不可跨域的，满足同源策略（即同协议，同域名，同端口），当设定了一个cookie之后，再给创建他的域名发送请求的时候都会包含这个cookie,这个限制确保了存储在cookie之中的信息只能让批准的接收到访问，而不能被第三方访问。比如，我们日常浏览网站的时候，百度和谷歌都会使用cookie，但是浏览器访问谷歌的时候只会携带谷歌的cookie而不会携带百度的cookie反之，访问百度的服务器的时候也就只能携带百度的cookie，cookie在浏览器由客户端来管理，浏览器能保证百度只能操作百度的cookie而不会操作谷歌的cookie。从而保障了用户的隐私安全。
  2.     因为cookie一般存储于客户端交互的信息，所以一般限制在4KB大小
  3.     cookie的时间是不固定的，可是设置为几分钟，也可以设置为几个月。
想要查看一个页面的cookie十分简单，只需要在控制台上输入：document.cookie即可,如下图：

关于Cookie、localStroage和sessionStorage的小结二、LocalStorage和SessionStorage

这个两个都是前端的数据存储机制，一般两者的常用api如下：

  •     用setItem()，和getItem()来设置和获取本地存储。
  •     用removeItem()可以清除某个特定的变量缓存。
  •     通过key()获取所有的本地缓存的key集合。
  •     通过clear()清空本地缓存。

LocalStorage和SessionStorage有什么区别呢。？

 LocalStorage满足同源策略（同协议，同域名，同端口）下的页面是可以共享LocalStorage的。而不同页面直接是不能共享SessionStorage的（注意，若是一个页面含有多个iframe，那么他们是可以共享SessionStorage的）

我们看如下代码：

<body>
    <div>测试iframe框架</div>
    <iframe src="./tree.html" frameborder="0" id="frame1" class="frame"></iframe>
    <iframe src="./flex.html" frameborder="0" id="frame2" class="frame"></iframe>
    <iframe src="./insert-frame.html" frameborder="0" id="frame3" class="frame inner-frame"></iframe>
</body>
//insert-frame.html
<script>
    //我是在内嵌iframe insert-frame.html中设置的
    window.localStorage.setItem('localSession-key','localSession-value-我是在内嵌iframe insert-frame.html中设置的')
    window.sessionStorage.setItem('localSession-key','localSession-value-我是在内嵌iframe insert-frame.html中设置的')
</script>

上述代码我们在一个住页面中设置了三个iframe，然后在第三个内嵌的iframe中分别设置了LocalStorage和SessionStorage。我们在浏览器的Application中查看一下我们设置的值：

关于Cookie、localStroage和sessionStorage的小结


关于Cookie、localStroage和sessionStorage的小结


这时候我们先验证一下LocalStorage满足同源策略，在同源下打开另一个页面（上述截图注意url部分页面是iframe.html），我们打开同源下另一个页面，border-blibli.html

下过如下：

关于Cookie、localStroage和sessionStorage的小结

可以看到同源下的另一个页面是共享LocalStorage的。

在看看SessionStorage

关于Cookie、localStroage和sessionStorage的小结

可以看到在SessionStorage中是没有的。


下面我们看看 在iframe.html中内嵌了多个iframe是否会共享SessionStorage.

首先先切换ifrme,然后查看Application中的SessionStorage部分，看看是否有这个变量。如下图所示：

关于Cookie、localStroage和sessionStorage的小结

关于Cookie、localStroage和sessionStorage的小结

关于Cookie、localStroage和sessionStorage的小结

我们也可以通过window.sessionStorage.getItem()取出这个值。


三、关于生命周期

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

sessionStorage是能在单个页面中实现共享，页面关闭之后sessionStorage的信息就会消失（即一个会话结束了）。


四、LocalStorage与Cookie的比较

  • localStorage中的文本信息只会存在于本地浏览器，不会随着HTTP请求发送到后端，除非手动设置，而Cookie会随着同源的HTTP请求发送到服务端
  • localStorage的存储大小一般要大很多，一般是几兆，各个浏览器有所不同，而Cookie只有4KB
  • localStorage中的信息只要不手动删除就会永远存在，而cooike的有效期是有限的，有默认值，也可以手动设定，而且和窗口无关
  • 可以给localStorage设置监听storage事件（对storage做任何的修改都会在文档上触发storage事件），做数据变更的后续处理。

好了，今天就写到这儿，若大家有什么心得体会，欢迎一起交流。
















相关标签： Cookie SessionStorage LocalStorage 本地存储 http携带cookie

上一篇： springboot 使用外置servlet 容器

下一篇： SpringBoot2 定制和修改嵌入式Servlet容器(Tomcat)的相关配置

推荐阅读