cookie、localStorage、sessionStorage三者之间的简单区别

最新推荐文章于 2024-05-10 09:40:33 发布
最新推荐文章于 2024-05-10 09:40:33 发布
阅读量127 收藏
点赞数
分类专栏： 前端 文章标签： 前端
原文链接：https://juejin.cn/post/6844903516826255373
版权

前端本地存储的方式目前有三种，分别是：cookie、localStorage、sessionStorage。

一、不同点
  1. 生命周期
    cookie：可设置失效时间，没有设置的话，默认是关闭浏览器后失效
    localStorage：除非被手动清除，否则将会永久保存
    sessionStorage：仅在当前网页下有效，页面关闭会自动清除
  2. 存放数据
    cookie：4KB左右
    localStorage和sessionStorage：可以保存5MB的信息
  3. http请求
    cookie：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
    localStorage和sessionStorage：仅在客户端(即浏览器)中保存，不参与和服务器的通信
  4. 易用性
    cookie：需要程序员自己封装，原生的cookie接口不友好
    localStorage和sessionStorage：原生接口可以接受，也可以再次封装来对Object和Array有更好的支持
二、应用场景

从安全性来说，因为每次http请求都会携带cookie信息，这样无形中浪费了宽带，所以cookie尽可能少的使用，另外cookie还需要指定作用域，不可以跨域调用，限制比较多。但是用来识别用户登录来说，cookie还是比storage更好用。其他情况下，可以使用storage，就用storage

​ storage在存储数据的大小上面秒杀了cookie

​ localStorage和sessionStorage唯一的差别是一个永久保存在浏览器里面，一个是关闭网页就清除了信息。localStorage可以用来跨页面传递参数，sessionStorage用来保存一些临时的数据，防止用户刷新页面之后丢失了一些参数。

三、浏览器支持情况

localStorage和sessionStorage是h5才应用的新特性，可能有些浏览器并不支持。

参考：来自掘金-参考链接

大块博
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
10-14
- `sessionStorage` 和 `localStorage` 都属于Web Storage API，它们的主要区别在于数据的有效期：`sessionStorage`只存在于当前会话，而`localStorage`数据持久化。 - `cookie` 与前两者相比，不仅可用于存储数据，...
localstorage实现带过期时间的缓存功能
01-19
前言 一般可以使用cookie,localstorage,sessionStorage来实现浏览器端的数据缓存，减少对服务器的请求。 1.cookie数据存放在本地硬盘中，只要在过期时间之前，都是有效的，即使重启浏览器。...这三者仅支持同源(host+p
cookies、localStorage 、sessionStorage 的区别
weixin_47227886的博客
04-10 5354
介绍：cookie，意思是小甜饼，顾名思义，cookie 确实非常小，它的大小限制为 4KB 左右；每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精 简就精简！常用的应用场景：判断用户是否登录。介绍：localStorage，它是 HTML5 标准中新加入的技术，localStorage 已经被大多数浏览器所支持； sessionStorage，它与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同，它只是
localStorage，sessionStorage和cookie的介绍及区别
qq_40961420的博客
08-05 947
localStorage，sessionStorage和cookie的介绍及区别 1、localStorage localStorage是HTML5规范中作为持久化保存客户端数据的方案， localStorage可以用于数据缓存，日志存储等应用场景 localStorage特征： 受同源策略的限制 存储空间一般都在5MB左右 键值对最终的存储形式是字符串 2、sessionStorage 会话，是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但是页面关闭后，sessionStorage
cookie、localStorage、sessionStorage详细介绍
最新发布
qq_41861815的博客
05-10 655
当Max-Age为0时，删除cookie，因为cookie机制本身没有设置删除cookie，失效的cookie会被浏览器自动从内存中删除，所以，它实现的就是让cookie失效。http协议中的cookie包括web cookie和浏览器 cookie，是服务器发送到web浏览器的一小块数据，保存在浏览器的一小段文本信息，浏览器进行存储并且下次发送请求的时候携带上cookie。为了解决http无状态的特点，会在请求中插入token，然后发送请求，告诉服务器，但是这种方式容易出错，所以cookie就出现了。
Cookie、LocalStorage、SessionStorage的区别
m0_56698268的博客
04-20 407
Cookie、LocalStorage、SessionStorage的区别以及使用
session、cookie、WebStorage（sessionStorage，localStorage）区别
huhm_evget的博客
04-21 546
cookie 天生就是最适合做认证，他们最大的区别是：每次 request 都会自动在 header 中带上所有的 cookie。 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie,session等跟服务端进行数据交互。 一、cookie和session cookie和session都是用来跟踪浏览器用户身份的会话方式。 cookie机制 如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中
请描述一下 cookies，sessionStorage 和 localStorage 的区别
bahui8150的博客
09-12 374
（一）相同点：都存储在客户端 （二）不同点： 1.存储大小不同 cookie数据大小不能超过4k。 sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。 2.有效时间不同 localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage...
cookie，localStorage,sessionStorage区别与应用
01-07
cookie localStorage sessionStorage 概念 存放在客户端的一段文本信息 存储在客户端的临时信息，只能存放字符串类型数据 同localStorage 大小 4k 5M 5M 生命周期 浏览器关闭，数据清空 存在内存中，除非...
JavaScript cookie原理及使用实例
11-21
然而，随着技术的发展，Web Storage（localStorage和sessionStorage）以及IndexedDB等现代存储解决方案提供了更大容量和更安全的数据存储选项，可以作为Cookie的补充或替代。在实际应用中，应综合考虑安全性、存储...
web前端学习-初学者练习素材
11-06
4. **Web Storage**：HTML5提供了localStorage和sessionStorage，用于在浏览器端存储数据，解决了Cookie存储容量有限的问题。 5. **离线存储**：通过或Service Worker，可以实现应用程序的离线访问，增强用户体验。...
localstorage sessionstorage和cookie的区别
qq_35859392的博客
01-23 111
基本概念 cookie：是网景公司的前雇员在1993年发明。它的主要用于保存登陆信息，比如登陆某个网站市场可以看到'记住密码’，这就是通过在cookie中存入一段辨别用户身份的数据来实现的。 sessionStorage：会话，是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但是页面关闭后，sessionStorage中的数据就会被清空。 localStorage：是HTML5标准...
Cookie、LocalStorage、SessionStorage
欠踹的背影
08-01 247
Cookie、LocalStorage、SessionStorage 一、基本概念 1、Cookie cookie非常小，大小限制大约4k左右，通常用来报存用户信息等操作。 2、localStorage localStorage 是 HTML5 标准中新加入的技术。 3、sessionStorage sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 l...
关于sessionStorage 、localStorage 和 cookie
山鬼谣弋痕夕的博客
07-14 1716
sessionStorage 、localStorage 和 cookie 之间的区别共同点：都是保存在浏览器端，且同源的。区别： 1:cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。 cookie数...
localStorage，sessionStorage和cookie的区别
weixin_46920847的博客
03-23 1931
只能说是面试常考题了，特别是在项目中使用到这几个的任何一个，基本都会进行提问区别。于是决定进行好好总结。 共同点： 都是用于数据存储，将数据存储在浏览器端，满足同源策略。（同源策略是用于限制一个源和另一个源进行交互的安全策略，同源：协议、端口号、主机都相同） 区别： 保存方式区别：cookie数据始终在同源的http请求中携带，即cookie会在浏览器和服务器之间来回传递，但可以通过路径限制其只属于某个路径下有效。而sessionStorage和localStorage不会把数据发给服务器，仅在本地保存。
简单理解cookie、sessionStorage和localStorage
weixin_47340917的博客
01-20 1573
简单理解cookie、session、sessionStorage、localStorage 前端本地存储数据的方式有三种，也就是是cookie，localstorage和sessionStorage 。 三者的异同 生命周期： cookie：可设置失效时间，没有设置的话，默认是关闭浏览器后失效 localStorage：除非被手动清除，否则将会永久保存。 sessionStorage： 仅在当前网页会话下有效，关闭页面或浏览器后就会被清除。 存放数据大小： cookie：4KB左右 localStorag
数据存储：cookie、localStorage、sessionStorage 详解
weixin_38822843的博客
11-08 1746
储存的数据可能是从服务器端获取到的数据，也可能是在多个页面中需要频繁使用到的数据 1.简单对比 1、cookie：4K，可以手动设置失效期 2、localStorage：5M，除非手动清除，否则一直存在 3、sessionStorage：5M，不可以跨标签访问，页面关闭就清理 2.cookie Cookie通过在客户端记录信息确定用户身份 Session通过在服务器端记录信息确定用户身份 一个用户的所有请求操作都应该属于同一个会话，而另一个用户的所有请求操作则应该属于另一个会话 HT
cookie 、sessionstorage 、localstorage三者的区别
weixin_45541388的博客
06-21 1万+
cookie、loacalstorage、sessionstorage的区别
cookie、sessionStorage和localStorage的区别
热门推荐
浮生离梦的博客
05-30 8万+
一、 概念的理解 webstorage本地存储 1）webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage 2）localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信 3）ses...
sessionStorage localStorage cookie三者区别
08-13
sessionStorage、localStorage和cookie都是在浏览器端存储数据的方式，但它们有一些区别。 1. 作用域： - sessionStorage：数据仅在单个会话期间有效，当用户关闭浏览器窗口时会被清除。 - localStorage：数据在浏览器关闭后仍然保留，因此可以在多个会话期间使用。 - cookie：数据在设置的过期时间之前一直有效，可以被多个页面和浏览器窗口共享。 2. 存储容量： - sessionStorage和localStorage：通常可以存储5MB到10MB的数据。 - cookie：通常限制为4KB。 3. 与服务器通信： - sessionStorage、localStorage：仅在客户端存储数据，不与服务器进行通信。 - cookie：每次请求都会将cookie附加到请求头中发送给服务器。 4. 数据的存储方式： - sessionStorage、localStorage：以键值对的形式存储数据。 - cookie：只能存储字符串类型的数据，需要进行编码和解码。 5. 安全性： - sessionStorage、localStorage：数据存储在浏览器端，相对较安全，但仍然容易受到XSS攻击。 - cookie：由于每次请求都会发送给服务器，存在被劫持的风险。 总结来说，sessionStorage和localStorage适用于在客户端存储临时或持久的数据，而cookie主要用于实现用户会话跟踪和存储少量的数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值