详细解析cookie,sessionStroage和localStroage的区别

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介: 详细解析cookie,sessionStroage和localStroage的区别前面我们说到了JavaScript中的缓存对象,主要是cookie,sessionStroage和localStroage,今天我们来讲一下这三者之间的区别。共同点 都是保存在浏览器端,且同源的。(所谓同源就是协议,域名,端口号相同)。 都是字符串类型的键值对。区别1.cookie HTTP Cookie简称cookie,在HTTP请求发送Set-Cookie HTTP头作为响应的一部分。通过name=value的形式存储 cookie的构成: 名称:n

详细解析cookie,sessionStroage和localStroage的区别




前面我们说到了JavaScript中的缓存对象,主要是cookie,sessionStroage和localStroage,今天我们来讲一下这三者之间的区别。


共同点


   都是保存在浏览器端,且同源的。(所谓同源就是协议,域名,端口号相同)。

   都是字符串类型的键值对。


区别


1.cookie


   1. HTTP Cookie简称cookie,在HTTP请求发送Set-Cookie HTTP头作为响应的一部分。通过name=value的形式存储


   2.cookie的构成:

   名称:name(不区分大小写,但最好认为它是区分的)

   值:value(通过URL编码:encodeURIComponent)

   域

   路径

   失效时间:一般默认是浏览器关闭失效,可以自己设置失效时间

   安全标志:设置安全标志后只有SSL连接的时候才发送到服务器。


   3.cookie的作用:主要用于保存登录信息。


  4. 生命期为只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。 存放数据大小为4K左右 。有个数限制(各浏览器不同),一般不能超过20个。与服务器端通信:每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题。


   5.cookie的优点:具有极高的扩展性和可用性

   通过良好的编程,控制保存在cookie中的session对象的大小

   通过加密和安全传输技术,减少cookie被破解的可能性

   只有在cookie中存放不敏感的数据,即使被盗取也不会有很大的损失

   控制cookie的生命期,使之不会永远有效。这样的话偷盗者很可能拿到的就 是一个过期的cookie。


  6. cookie的缺点:

   cookie的长度和数量的限制。每个domain最多只能有20条cookie,每个cookie长度不能超过4KB,否则会被截掉

   安全性问题。如果cookie被人拦掉了,那个人就可以获取到所有session信息。加密的话也不起什么作用

   有些状态不可能保存在客户端。例如,为了防止重复提交表单,我们需要在服务端保存一个计数器。若吧计数器保存在客户端,则起不到什么作用。


2.sessionStorage


  1. sessionStorage是Storage类型的一个对象,拥有clear(),getItem(name),key(index),removeItem(name),setItem(name,value)方法。


  2. sessionStorage对象存储特定于某个会话的数据,也就是该数据只保持到浏览器关闭。


   3.将数据保存在session对象中。所谓session,是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。


   4.sessionStorage为临时保存。


3.localStorage


   1.localStorage也是Storage类型的一个对象。


  2. 在HTML5中localStorage作为持久保存在客户端数据的方案取代了globalStorage(globalStorage必须指定域名)。


  3. localStorage会永久存储会话数据,除非removeItem,否则会话数据一直存在。


   4.将数据保存在客户端本地的硬件设备(通常指硬盘,也可以是其他硬件设备)中,即使浏览器被关闭了,该数据仍然存在,下次打开浏览器访问网站时仍然可以继续使用。


   5. localStorage为永久保存。


总结 :简单区别如图。

图片.png

在这里插入图片描述

1、localStorage 拓展了 cookie 的 4K 限制。

2、localStorage 会可以将第一次请求的数据直接存储到本地,这个相当于一个 5M 大小的针对于前端页面的数据库,相比于 cookie 可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的。


localStorage 的局限


1、浏览器的大小不统一,并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性。


2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换。

3、localStorage在浏览器的隐私模式下面是不可读取的。

4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡。

5、localStorage不能被爬虫抓取到。


localStorage 与 sessionStorage 的唯一一点区别就是 localStorage 属于永久性存储,而 sessionStorage 属于当会话结束的时候,sessionStorage 中的键值对会被清空。


相关文章
|
3月前
|
存储 运维 安全
SaaS多租户和单租户的区别解析
SaaS多租户的系统维护成本低,多租户系统在升级时,只需要更新一次,维护人员不需要对每个用户更新,节省了很大的运维成本,这对于所有客户都在做同样事情的系统来说是很有用的。
110 3
|
2月前
|
存储 安全 数据安全/隐私保护
Cookie 和 Session 的区别及使用 Session 进行身份验证的方法
【10月更文挑战第12天】总之,Cookie 和 Session 各有特点,在不同的场景中发挥着不同的作用。使用 Session 进行身份验证是常见的做法,通过合理的设计和管理,可以确保用户身份的安全和可靠验证。
25 1
|
2月前
|
存储 JavaScript 前端开发
vuex和localstorage . cookie的区别
【10月更文挑战第8天】
59 1
|
2月前
|
自然语言处理 Java 数据处理
Java IO流全解析:字节流和字符流的区别与联系!
Java IO流全解析:字节流和字符流的区别与联系!
92 1
|
2月前
|
自动驾驶 5G 网络架构
|
2月前
|
存储 缓存 JavaScript
cookie和localStorage的区别特点
cookie和localStorage的区别特点
148 0
|
2月前
|
C语言
深入解析sizeof和strlen的区别与联系
深入解析sizeof和strlen的区别与联系
|
3月前
|
定位技术 网络虚拟化 数据中心
VLAN与VXLAN技术解析:仅一字之差的深远区别
通过深入了解VLAN与VXLAN的技术细节和应用场景,网络工程师可以根据具体需求选择最合适的技术来优化网络架构。对于现代网络环境,尤其是大规模和多变的网络结构,理解并合理运用这些技术是提高网络效率和安全性的关键。
98 1
|
3月前
|
存储 安全 NoSQL
Cookie、Session、Token 解析
Cookie、Session、Token 解析
63 0
|
3月前
|
存储 缓存 NoSQL
Redis 过期删除策略与内存淘汰策略的区别及常用命令解析
Redis 过期删除策略与内存淘汰策略的区别及常用命令解析
77 0

推荐镜像

更多