首页 > 试题广场 >

说一说cookie sessionStorage local

[问答题]
说一说cookie sessionStorage localStorage 区别?

推荐
【得分点】
数据存储位置、生命周期、存储大小、写入方式、数据共享、发送请求时是否携带、应用场景
【参考答案】
标准回答
Cookie、SessionStorage、 LocalStorage都是浏览器的本地存储。
它们的共同点:都是存储在浏览器本地的
它们的区别:cookie是由服务器端写入的,而SessionStorage、 LocalStorage都是由前端写入的,cookie的生命周期是由服务器端在写入的时候就设置好的,LocalStorage是写入就一直存在,除非手动清除,SessionStorage是页面关闭的时候就会自动清除。cookie的存储空间比较小大概4KB,SessionStorage、 LocalStorage存储空间比较大,大概5M。Cookie、SessionStorage、 LocalStorage数据共享都遵循同源原则,SessionStorage还限制必须是同一个页面。在前端给后端发送请求的时候会自动携带Cookie中的数据,但是SessionStorage、 LocalStorage不会
加分回答
由于它们的以上区别,所以它们的应用场景也不同,Cookie一般用于存储登录验证信息SessionID或者token,LocalStorage常用于存储不易变动的数据,减轻服务器的压力,SessionStorage可以用来检测用户是否是刷新进入页面,如音乐播放器恢复播放进度条的功能。
【延伸阅读】
服务器端Cookie写入语法:
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
LocalStorage语法:
localStorage.setItem('myCat', 'Tom');   // 设置
let cat = localStorage.getItem('myCat');// 获取
localStorage.removeItem('myCat'); // 移除某个
localStorage.clear(); // 清除所有
SessionStorage语法:
sessionStorage.setItem('key', 'value');   // 保存数据到 sessionStorage
let data = sessionStorage.getItem('key'); // 从 sessionStorage 获取数据
sessionStorage.removeItem('key');  // 从 sessionStorage 删除保存的数据
sessionStorage.clear();  // 从 sessionStorage 删除所有保存的数据
LocalStorage和SessionStorage存储复杂数据类型需要将数据先转换成JSON格式再存储

编辑于 2021-09-17 11:26:38 回复(0)
cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递,而sessionStoragelocalStorage不会自动把数据发送给服务器,仅在本地保存。
发表于 2022-06-28 16:32:22 回复(0)