浏览器的cookie，localStorage,sessionStorage区别

女爷i 2022-06-01 04:24 152阅读 0赞

# 浏览器的cookie，localStorage,sessionStorage区别    #

localStorage,sessionStorage,cookies都是客户端存储的解决方案

## 1、localStorage和sessionStorage的声明周期 ##

localStorage和sessionStorage都是用来存储客户端临时信息对象，他们只能存储字符串类型的对象，所以我们想要存储其它类型的数据，不得不需要自手动的进行编码和解码，规范 中可以存储其它原生类型的对象，目前没有浏览器对其实现。

sessionStorage生命周期为当前窗口或标签页面，它仅仅适用于浏览器会话的持续时间，换句话说当标签或

者窗口关闭的时候，sessionStorage将会被删除。通过sessionStorage存储的数据也就被清空了。

localStorage生命周期为永久有效，除非自己清除了localStorage的内容，不然localStorage存储的信息将永久存在。

## 2、localStorage和session的共享性 ##

对于不同的浏览器来说，无法共享localStorage或sessionStorage中的信息。

相同浏览器的不同页面间可以共享相同localStorage，前提是页面属于相同的域名和端口（其作用域限定在文档源级别（只要URL的协议、端口、主机名三者中有一个不同，就属于不同的文档源））。

不同的页面或者标签方无法共享sessionStorage的信息，这里需要注意的是，页面及标签页仅仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。（也就是说如果关闭标签页后，通过sessionStorage存储的数据就都被删除了。sessionStorage的作用域不仅被限制在文档源，还被限定在窗口中，也就是同一标签页中。注意，这里说的窗口是指顶级窗口，若果同一标签页中包含多个<iframe>元素，这两者之间也是可以共享sessionStorage的。）

## 3、cookie ##

cookie的主要内容包括：名字、值、过期时间、路径和域。路径与域一起构成cookie的作用范围。若不设置时间，则表示这个cookie的生命周期为浏览器会话期间，关闭浏览器窗口，cookie就会消失。这种生命周期为浏览器会话期的cookie被称之会话cookie。

会话cookie一般不存储在硬盘而是保存在内存里，当然这个行为并不是规范规定的。若设置了过期时间，浏览

器就会把cookie保存到硬盘上关闭后再打开浏览器这些cookie仍然有效直到超过设定的过期时间。对于保存在内存

里的cookie，不同的浏览器有不同的处理方式。

4、sessionStorage、localStorage、cookie的区别

共同点：

都是保存在浏览器端，并且是同源的（URL的协议、端口、主机名是相同的，只要有一个不同就属于不同源）

不同点：

1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而session

Storage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以

限制cookie只属于某个路径下。

2、存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合

保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以

达到5M或更大

3、数据有效期不同，sessionStorage仅仅在当前浏览器窗口关闭之前有效；localStorage始终有效，窗口或者

浏览器关闭之后也一直保存，因此作用持久数据；cookie，只在设置cookie过期时间之前有效，即使窗口关闭或者浏

览器关闭。

4、作用域不同：sessionStorage在不同的浏览器窗口中不共享，即使是同一个页面，localStorage在所有的同源窗

口中是共享的，cookie也是在所有同源的窗口中共享的。

5、web Storage支持事件通知机制，可以将数据更新的通知发送给监听者。

6、web Storage的api接口使用更方便。

发表评论取消回复

表情：

评论列表（有 0 条评论，152人围观）

还没有评论，来说两句吧...

相关阅读

相关浏览器cookie、sessionStorage和localStorage的区别

一、概念的理解 webstorage本地存储 1）webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage 2）lo

分手后的思念是犯贱/ 2023年07月25日 11:19/ 0 赞/ 2 阅读

相关【转载】JavaScript运行时：Node环境和浏览器环境的区别

两者区别主要表现在功能侧重不同，`Node`环境下的`JS`主要面向开发服务器，更加侧重业务逻辑开发，因而需要支持文件读写以及模块等特性来保证服务器功能正常及快速开发；而浏览器

朱雀/ 2022年11月19日 12:43/ 0 赞/ 150 阅读

相关 IE浏览器生效的CSS 与其他浏览器区别对待

本文转载自 https://blog.csdn.net/Caroline\_Yang/article/details/106662172 [点击去原文][Link 1]

蔚落/ 2022年09月02日 08:01/ 0 赞/ 140 阅读

相关 360浏览器的极速模式和兼容模式的区别

想获取更多的前端技术-请专注公众号：胖梅web前端 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

我不是女神ヾ/ 2022年07月14日 05:37/ 0 赞/ 406 阅读

相关浏览器标准模式和怪异模式之间的区别是什么？

由于历史的原因，不同浏览器对页面的渲染是不同的，甚至同一浏览器的不同版本也是不同的。在W3C标准出台之前，不同的浏览器在页面的渲染上没有同一的规范，产生了差异，即Quirks

ゝ一世哀愁。/ 2022年06月11日 02:15/ 0 赞/ 251 阅读

相关浏览器的cookie，localStorage,sessionStorage区别

浏览器的cookie，localStorage,sessionStorage区别 localStorage,sessionStorage,cookies都是客户端存

女爷i/ 2022年06月01日 04:24/ 0 赞/ 153 阅读

相关浏览器传递数据 ---- session cookie sessionStorage localStorage区别

浅谈session,cookie,sessionStorage,localStorage的区别及应用场景浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用

清疚/ 2022年05月15日 08:28/ 0 赞/ 197 阅读

相关 IE “浏览器模式”和“文档模式”的区别

文章引用地址：http://www.iefans.net/shanchu-ie9-wenjianjia/ 作者：iefans 　　从IE8浏览器开始，微软向 Web

古城微笑少年丶/ 2022年04月13日 11:51/ 0 赞/ 219 阅读

相关浏览器缓存：Cookie、LocalStorage、SessionStorage的区别

浏览器缓存：Cookie、LocalStorage、SessionStorage的区别 1、Cookie cookie 是存储在本地的数据，本身非常小，它的大小限制

﹏ヽ暗。殇╰゛Y/ 2021年09月07日 06:20/ 0 赞/ 592 阅读

相关浏览器标准模式和怪异模式之间的区别是什么

在标准模式页面按照`HTML,CSS`的定义渲染，而在怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计，并未严格遵循`W3C`标准而产生的一种页面渲染模式。浏览器基于页面

阳光穿透心脏的1/2处/ 2021年06月26日 16:06/ 0 赞/ 573 阅读