前端面经 详解Cookie、SessionStorage和LocalStorage的区别联系

• LocalStorage 本地存储

WebStorage的两大目标

• 提供一种Cookie之外的存储会话数据的路径

• 提供一种存储大量可以跨会话存在的数据的机制

SessionStorage的特点

================================================================================

总结：

• 存储地方：仅仅在客户端浏览器中储存，不与服务器交互通信。

• 生命周期：仅在当前会话下有效。关闭浏览器或者页面则会被清除。

• 存储大小：5MB

• 存储类型：SessionStorage只能存储字符串类型。对于复杂对象，可以用stringify和parse来处理。

• 获取方式：window.sessionStorage

• 作用域：不在不同浏览器窗口共享

• 适用场景：适合保存用户在关闭浏览器或页面后就可以丢弃的数据。

LocalStorage的特点

==============================================================================

总结：

• 存储地方：仅仅在客户端浏览器中储存，不与服务器交互通信。

• 生命周期：永久。除非用户去清除，否则一直存在。

• 存储大小：5MB

• 存储类型：LocalStorage只能存储字符串类型。对于复杂对象，可以用stringify和parse来处理。

• 获取方式：window.localStorage

• 作用域：所有的同源窗口

Cookie与WebStorage的区别

===================================================================================

有一篇文章讲过Cookie和Session的区别，里面有介绍Cookie的原理和特点，可以点击下方链接查看：

Cookie与Session的区别、详解Cookie和Session

Cookie的特点中需要我们注意的是：

• Cookie是保存在客户端浏览器的

• Cookie在每次http请求中都会发送给服务器端

WebStorage的特点呢：

• WebStorage也是保存在客户端浏览器的

• 但是WebStorage即SessionStorage和LocalStorage是不会自动把数据发给服务器的，只保存在本地。

综上总结一下Cookie和WebStorage的区别：

相同点：

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》

(img-BsDBgowt-1714629060199)]

[外链图片转存中…(img-IEPdV6Qz-1714629060200)]

[外链图片转存中…(img-uOIhRjhg-1714629060201)]