前端面试常问cookie、session、localStrorage、sessionStrorage区别以及应用场景

简介: 以上文章讲述的是【线上系统打如何正确打日志】接下来我总结一下【前端面试常问sessionStrorage、localStrorage、cookie、session的区别以及应用场景】。

一、cookie


保存方式:cookie保存在浏览器端

生命周期:如果不在浏览器中设置过期时间,cookie被保存在内存中,生命周期随浏览器的关闭而结束,这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间,cookie被保存在硬盘中,关闭浏览器后,cookie数据仍然存在,直到过期时间结束才消失。

作用:用来跟踪浏览器用户身份的会话方式

版本:HTML4本地存储

存储的大小:单个cookie保存的数据不能超过4kb

应用场景: (1)判断用户是否登陆过网站,以便下次登录时能够实现自动登录(或者记住密码)。如果我们删除cookie,则每次登录必须从新填写登录的相关信息。

(2)保存上次登录的时间等信息。

(3)保存上次查看的页面

(4)浏览计数

存储内容:只能保存字符串类型,以文本的方式;

缺点: (1)大小受限4KB

(2)用户可以操作(禁用)cookie,使功能受限

(3)安全性较低

(4)有些状态不可能保存在客户端。

(5)每次访问都要传送cookie给服务器,浪费带宽。

(6)cookie数据有路径(path)的概念,可以限制cookie只属于某个路径下。


二、session


保存方式:session保存在服务器端

生命周期:默认失效时间为20分钟(当没有被访问时才开始计算)

作用:用来跟踪浏览器用户身份的会话方式

版本:HTML4本地存储

存储的大小:大小没有限制。

应用场景:保存每个用户的专用信息,变量的值保存在服务器端,通过SessionID来区分不同的客户。

  (1)网上商城中的购物车

  (2)保存用户登录信息

  (3)将某些数据放入session中,供同一用户的不同页面使用

  (4)防止用户非法登录

存储内容:通过类似与Hashtable的数据结构来保存,能支持任何类型的对象(session中可含有多个对象)

缺点

(1)Session保存的东西越多,就越占用服务器内存,对于用户在线人数较多的网站,服务器的内存压力会比较大。

(2)依赖于cookie(sessionID保存在cookie),如果禁用cookie,则要使用URL重写,不安全 i9 c vwesx (3)创建Session变量有很大的随意性,可随时调用,不需要开发者做精确地处理,所以,过度使用session变量将会导致代码不可读而且不好维护。


三、localStrorage


保存方式:将数据保存在客户端本地的硬件设备(通常指硬盘,也可以是其他硬件设备)中,即使浏览器被关闭了,该数据仍然存在,下次打开浏览器访问网站时仍然可以继续使用。(保存在客户端,不与服务器进行交互通信。)

生命周期:永久保存

作用:同cookie,session一样只不过是他们的一个升级版

版本:HTML5本地存储

存储大小:5MB

应用场景:常用于长期登录(+判断用户是否已登录),适合长期保存在本地的数据

存储内容:只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理


四、sessionStrorage


保存方式:将数据保存在session对象中。所谓session,是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据(保存在客户端,不与服务器进行交互通信。)

生命周期:临时保存

作用:同cookie,session一样只不过是他们的一个升级版

版本:HTML5本地存储

存储大小:5MB

应用场景:敏感账号一次性登录;

存储内容:只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理


五、区别


cookie的生命周期随浏览器关闭而关闭。sessionStrorage是临时保存。localStrorage永久保存。

cookie传输不安全,浪费带宽(客户端请求服务端的时候要带上cookie所以浪费带宽)

sessionStrorage与localStrorage不与服务器通信所以相当节省资源以及更安全

cookie传输只有4KB,有限制大小。而sessionStrorage与localStrorage是5MB更大一些。

cookie只能传输字符串文本形式。而sessionStrorage与localStrorage支持任何类型对象


相关文章
|
2月前
|
前端开发 UED 开发者
颠覆你的前端知识:防抖与节流的区别及实战解析!
【8月更文挑战第23天】在Web前端开发中,处理用户界面交互产生的事件可能会影响性能。为此,我们有两种优化方法:防抖(debounce)和节流(throttle)。防抖确保函数仅在事件停止触发一段时间后执行一次,适用于如搜索自动补全场景。而节流则确保函数按固定时间间隔执行,不管用户操作频率如何。本篇技术博客将深入解析两者差异并提供示例代码,帮助开发者更好地理解和应用这些技巧以提升应用性能和用户体验。
73 0
|
18天前
|
缓存 Java Spring
servlet和SpringBoot两种方式分别获取Cookie和Session方式比较(带源码) —— 图文并茂 两种方式获取Header
文章比较了在Servlet和Spring Boot中获取Cookie、Session和Header的方法,并提供了相应的代码实例,展示了两种方式在实际应用中的异同。
78 3
servlet和SpringBoot两种方式分别获取Cookie和Session方式比较(带源码) —— 图文并茂 两种方式获取Header
|
1天前
|
存储 安全 数据安全/隐私保护
Cookie 和 Session 的区别及使用 Session 进行身份验证的方法
【10月更文挑战第12天】总之,Cookie 和 Session 各有特点,在不同的场景中发挥着不同的作用。使用 Session 进行身份验证是常见的做法,通过合理的设计和管理,可以确保用户身份的安全和可靠验证。
7 1
|
1月前
|
存储 缓存 数据处理
php学习笔记-php会话控制,cookie,session的使用,cookie自动登录和session 图书上传信息添加和修改例子-day07
本文介绍了PHP会话控制及Web常用的预定义变量,包括`$_REQUEST`、`$_SERVER`、`$_COOKIE`和`$_SESSION`的用法和示例。涵盖了cookie的创建、使用、删除以及session的工作原理和使用,并通过图书上传的例子演示了session在实际应用中的使用。
php学习笔记-php会话控制,cookie,session的使用,cookie自动登录和session 图书上传信息添加和修改例子-day07
|
18天前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
20 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
|
5天前
|
JavaScript 前端开发 应用服务中间件
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
13 0
|
5天前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
33 0
|
9天前
|
前端开发
前端常用方法防抖(debounce)和节流(throttle)的示例演示及应用场景说明
前端常用方法防抖(debounce)和节流(throttle)的示例演示及应用场景说明
17 0
|
1月前
|
存储 前端开发 Java
JavaWeb基础7——会话技术Cookie&Session
会话技术、Cookie的发送和获取、存活时间、Session钝化与活化、销毁、用户登录注册“记住我”和“验证码”案例
JavaWeb基础7——会话技术Cookie&Session
|
27天前
|
存储 安全 NoSQL
Cookie、Session、Token 解析
Cookie、Session、Token 解析
44 0