2024年前端最新前端面经 详解Cookie、SessionStorage和LocalStorage的区别联系，真香

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

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

篇幅有限，仅展示部分内容

• SessionStorage 会话存储

• 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的区别：

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

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

实战+最新讲解视频】](https://bbs.youkuaiyun.com/topics/618166371)**

[外链图片转存中…(img-QoSm2mrO-1715024902202)]
[外链图片转存中…(img-iWL4qjZ6-1715024902203)]