【前端缓存】cookies, sessionStorage和localStorage的区别

最新推荐文章于 2022-04-25 16:41:36 发布
最新推荐文章于 2022-04-25 16:41:36 发布
阅读量125 收藏
点赞数
分类专栏： 学习笔记 前端 文章标签： html5 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qs52955339/article/details/120745872
版权

cookies,sessionStorage和localStorage的区别

cookie用来表示用户身份而存在client上（通常是加密过的）。

从数据的生命周期来看

cookie一般由服务器生成，可设置失效时间，过期时间之前一直存在。

sessionStorage的数据在当前浏览器窗口关闭后自动删除。

localStorage存储持久数据，浏览器关闭后数据不会丢失，除非主动删除数据。

与服务器端通信

cookie每次都会携带在同源Http头中，即使不需要也会在浏览器和服务器之间传递，如果使用cookie保存过多数据会带来性能问题。

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

从存储数据大小

cookie数据大小不超过4K。

sessionStorage和localStorage虽然大小也有限制，但是比cookie大很多，可以达到5M或者更大。

王昱潇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
cookie、sessionStorage和localStorage的区别（详细）
微微的猪食小窝
11-13 1245
1）webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage2）localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信3）sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
cookies、sessionStorage和localStorage解释及区别
qq_31455841的博客
12-23 199
cookies sessionStorage和localStorage解释及区别 在浏览器查看 1. HTML4的本地存储 cookie ​ 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie,session等跟服务端进行数据交互。 1. cookie和session ​ cookie和session都是用来跟踪浏览器用户身份的会话方式 2. cookie和session的区别 1. 保持状态 cookie保存在浏览器端，session保存在服务器端 2. 使用方式
2017年4月12日读书笔记
王昱潇的博客
04-12 396
1、 ORDER BY 子句在视图、内联函数、派生表、子查询和公用表表达式中无效。 2、用户自定义函数主要有：表值函数和标量值函数 表值函数返回一个值，标量值函数返回一张表。另外，函数名前面必须加上dbo架构名称。（即dbo.functionName） 注：创建函数时，应当添加注释，用以说明函数的用途，参数的意义，设计原理等。 3、存储过程有多个参数时，调用时不需要使用括号将参数括起来；创
【vue】页面弹窗传值记录
王昱潇的博客
11-25 562
需求：点击新增按钮，弹出Form弹窗 代码：
cookies sessionStorage和localstorage有什么区别？
weixin_47220950的博客
04-23 850
本地储存localStorage与cookie的区别 1）cookie在浏览器与服务器之间来回传递 sessionStorage和localStorage不会把数据发给服务器，仅在本地保存 2）数据有效期不同 cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭 sessionStorage：仅在当前浏览器窗口关闭前有效 localStorage 始终有效，长期保存 3）cookie数据还有路径的概念 可以限制cookie只属于某个路径下存储大小也不同，cookie数据不能超4k，s
描述一下cookies，sessionStorage和localStorage的区别？
IT修真院：初学者转行到互联网的聚集地
11-27 352
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能。 本篇分享的是：描述一下cookies，sessionStorage和localStorage的区别？ 1.背景介绍 SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存...
cookies，sessionStorage 和 localStorage 的区别1
08-08
cookies、sessionStorage 和 localStorage 的区别 cookies、sessionStorage 和 localStorage 是三个常用的浏览器端存储机制，它们都可以在浏览器端存储数据，但它们之间有着很大的不同。 cookies cookies 是一种...
cookie、sessionStorage和localStorage的区别
aliyun3的博客
04-25 1414
一、 概念的理解 webstorage本地存储 1）webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage 2）localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信 3）sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（
【Javascript】判断函数被调用的方法
王昱潇的博客
04-27 5413
前情提要 ES5及早期版本中函数具有多重功能，可以结合new使用，函数内的this值将指向一个新对象，在ES6中，函数混乱的双重身份有一些改变。 Javascript函数有两个不同的内部方法：[[Call]]和[[Construct]]，当遇到通过new关键字调用函数时，执行的是[[Construct]]函数，它负责创建一个通常被称作实例的新对象，然后再执行函数体，将this绑定到实例上。否则将执行[[Call]]函数，从而直接执行代码中的函数体。具有[[Construct]]方法的函数被统称为构造函数
前端面试常问题（持续整理中）
王昱潇的博客
04-08 1870
1、js的运行机制？ js主要用途是和用户互动，用来操作DOM，所以js是单线程的，避免了同时操作同一个DOM的矛盾问题。 2、arguments对象是什么？ 它是一个类数组对象，它有length属性，但是没有数组的方法。 它是如何转化成数组的呢？ 使用ES6中的【...】(展开运算符) 在ES5中的话可以使用Array.prototype.slice.call(arguments)。 注：slice()方法返回一个新的数组丢向，这一对象是由begin和end决定...
【Javascript】shift、unshift、pop、push的区别
王昱潇的博客
04-19 1305
shift() 定义：shitft方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。 说明：如果数组是空的，那么shift方法将不进行任何操作，返回undefined值，该方法会修改原数组。 unshift() 定义：unshift方法可向数组的开头添加一个或更多元素，并返回新的长度。 说明：unshift会直接修改原数组。 pop() 定义：pop() 方法用于删除并返回数组的最后一个元素。 说明：如果数组已经为空，则pop不改变数组，并返回undefined..
【webpack】webpack.config.j为什么只能用require不能用import
王昱潇的博客
11-05 866
刚刚摸鱼的时候看到群里有人提问，忽然发现自己也没关注过这个问题，顺手上网搜索了一下，感觉挺有意思的，留着以后深入学习一下。 https://webpack.js.org/concepts/configuration/#the-simplest-configuration ...
【Javascript】This指向问题
王昱潇的博客
11-10 689
前言：终于找了一个早晨看书，把this搞了个透彻！旧文总结的太乱了，都是这里学一点，那里看个视频的，学习基础知识还是得买书！ 旧的链接：https://blog.csdn.net/qs52955339/article/details/115759345?spm=1001.2014.3001.5501 留着做个纪念吧。 this到底指向谁 this要从多角度理解：全局环境下的this，箭头函数中的this，构造函数中的this，this的显隐性和优先级等。 在函数体中，非显式或隐式地简单调用函数时，在严格模
【Html+CSS】基础知识点梳理
王昱潇的博客
04-29 581
Html web标准三层组成 标准 说明 结构 用于对网页元素进行整理和分类。（Html） 表现 用于设置网页元素的版式、颜色、大小等外观（CSS） 行为 指网页模型的定义及交互的编写（Javascript） Html标签分类 常规元素 双标签 例如<p></p> 空元素 单标签 例如<br /> 文档类型，页面语言，字符集 <!DOCTYPE html> 就是告诉浏览器按照...
【JQuery】JQuery基础手册
王昱潇的博客
11-03 498
最近入职了，接手了比较老的代码，基本都是jquery实现的，上次用jquery已经是8年前的事了…趁这个机会复习下！ JQuery <script src="https://code.jquery.com/jquery-3.5.0.js"></script> JQuery是一个JavaScript函数库，包括以下特性： HTML元素选取 HTML元素操作 CSS操作 HTML事件函数 JavaScript特效和动画 HTML DOM遍历和修改 AJAX Utlities 文档就
【Vue】生命周期相关面试题
王昱潇的博客
10-12 475
Vue的生命周期 Vue的生命周期有哪些？一般在哪一步发起哪些请求及其原因？ vue的生命周期总共分为8个阶段：创建前/后（beforeCreate/created），载入前/后（beforeMount/mounted），更新前/后（beforeUpdate/updated），销毁前/后（beforeDestroy/destroyed） ![avatar][lifecycle] 生命周期钩子是如何实现的？ Vue的生命周期钩子就是回调函数，创建组件实例的过程中会调用对应的钩子方法；内部主要是用callHoo
【Javascript】使用Set求交集并集差集
王昱潇的博客
06-15 465
let arr1 = [1,2,3] let arr2 = [4,3,2] let a = new Set(arr1) let b = new Set(arr2) //并集 let union = new Set([...a, ...b]) console.log(Array.from(union)) //交集 let inter = new Set([...a].filter(function (x) {return b.has(x)})) console.log(inter) //差集 let d
【Vue】点击哪个li，就显示红色
王昱潇的博客
07-08 426
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&.
cookies,sessionStorage,localStorage应用场景用法及区别
最新发布
01-26
以下是cookies、sessionStorage和localStorage的应用场景、用法和区别： 1. Cookies： - 应用场景：Cookies主要用于在浏览器和服务器之间传递数据，常用于用户身份验证、记住用户偏好设置等。 - 用法：可以使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值