首页技术文章正文

Cookie、sessionStorage、localStorage的区别

更新时间:2021-04-15 来源:黑马程序员 浏览量:

1577370495235_学IT就到黑马程序员.gif


(1)问题分析

面试官主要是针对浏览器缓存方面的知识面进行考核,其中主要考点是HTML 5 本地存储的应用的考察,旨在敲定求职者是否具备真实的开发工作经验。

(2)核心问题讲解

共同点
都是保存在浏览器端!

区别
1)cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递;存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。
而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
2) 数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
3)作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。

(3) 问题扩展

1)session和cookie有什么区别 ?
建议答案 : session是存储服务器端,cookie是存储在客户端,所以session的安全性比cookie高。获取session里的信息是通过存放在会话cookie里的session id获取的。而session是存放在服务器的内存中里,所以session里的数据不断增加会造成服务器的负担,所以会把很重要的信息存储在session中,而把一些次要东西存储在客户端的cookie里。
session的信息是通过sessionid获取的,而sessionid是存放在会话cookie当中的,当浏览器关闭的时候会话cookie消失,所以sessionid也就消失了,但是session的信息还存在服务器端
2)怎么给localStorage设置值,和获取值 ?
设置值:localStorage.setItem(键,值)
获取值:localStorage.getItem(键)

(4)结合项目中使用

这个用的比较多的是在注册登陆这个功能的时候





猜你喜欢:

HTML5新增form属性有哪些功能?具体应该怎样操作?

HTML5的浏览器支持概况【web前端培训】

黑马程序员Html5+Css3由浅入深视频教程下载    

黑马程序员前端高级软件工程师培训

在线咨询 我要报名
和我们在线交谈!