Cookie、sessionStorage、localStorage的区别

（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由浅入深视频教程下载    

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