关于Cookie、localStroage和sessionStorage的小结

站长

2023年09月04日 19:19 · 阅读数 9

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

一、Cookie

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

特点：

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

想要查看一个页面的cookie十分简单，只需要在控制台上输入：document.cookie即可,如下图：

编辑二、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>

关于Cookie、localStroage和sessionStorage的小结

//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>