cookies，sessionStorage 和 localStorage 的区别?

<p style="text-align: start;"><img src="https://jsd.onmicrosoft.cn/gh/iGaoWei/codercdn@master/question/20240627/2024062709380748012.png" alt="https://jsd.onmicrosoft.cn/gh/iGaoWei/codercdn@master/question/20240627/2024062709380748012.png" data-href="" style=""></p><p style="text-align: start;">（1）共同点：三者都是浏览器的本地存储。</p><p style="text-align: start;">（2）区别：</p><p style="text-align: start;"> &nbsp; &nbsp;①存储位置：cookie是由服务器端写入的，而SessionStorage、LocalStorage都是由前端写入的；</p><p style="text-align: start;"> &nbsp; &nbsp;②存储大小：cookie的存储空间比较小，大概4KB,而SessionStorage、LocalStorage存储空间比较大，大概5M；</p><p style="text-align: start;"> &nbsp; &nbsp;③生命周期：cookie的生命周期是由服务器端在写入的时候就设置好的，SessionStorage是页面关闭的时候就会自动清除，LocalStorage是写入就一直存在，除非手动清除；</p><p style="text-align: start;"> &nbsp; &nbsp;④数据共享：三者的数据共享都遵循同源原则，SessionStorage还限制必须是同一个页面。</p><p style="text-align: start;"> &nbsp; &nbsp;⑤发送请求时是否携带：在前端给后端发送请求的时候会自动携带cookie中的数据，但是SessionStorage、LocalStorage不会；</p><p style="text-align: start;"> &nbsp; &nbsp;⑥应用场景：cookie一般用于存储登录验证信息SessionID或者token，SessionStorage可以用来检测用户是否是刷新进入页面，如音乐播放器恢复播放进度条功能，多页表单信息填写，LocalStorage常用于存储不易变动的数据，减轻服务器的压力。</p><p style="text-align: start;"><br></p><h4 style="text-align: start;">1. cookies</h4><p style="text-align: start;">介绍：cookie，意思是小甜饼，顾名思义，cookie 确实非常小，它的大小限制为 4KB 左右；每个 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精 简就精简！</p><p style="text-align: start;">常用的应用场景：判断用户是否登录。</p><p style="text-align: start;">针对登录过的用户，服 务器端会在他登录时往 Cookie 中加入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。</p><h4 style="text-align: start;">2.localStorage</h4><p style="text-align: start;">介绍：localStorage，它是 HTML5 标准中新加入的技术，localStorage 已经被大多数浏览器所支持；</p><p style="text-align: start;"> sessionStorage，它与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同，它只是可以将一部分数据在当前会话 中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就 会被清空。</p><p style="text-align: start;">常用的应用场景：</p><p style="text-align: start;">localStorage 接替了 Cookie 管理购物车的工作，</p><p style="text-align: start;">HTML5 游戏通常会产生一些本地数据，localStorage 则是非常适合做 这个工作的。</p><h4 style="text-align: start;">3.sessionStorage &nbsp;</h4><p style="text-align: start;">介绍：sessionStorage，它与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。</p><p style="text-align: start;">它只是可以将一部分数据在当前会话 中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就 会被清空。</p><p style="text-align: start;">常用的应用场景：</p><p style="text-align: start;"> 如果遇到一些内容特别多的表单，为了优化用户体验，我们可能要把表 单页面拆分成多个子页面，然后按步骤引导用户填写。这时候 sessionStorage 的作用 就发挥出来了。</p><h4 style="text-align: start;">4.区别</h4><table style="width: 100%;"><tbody><tr><th colSpan="1" rowSpan="1" width="216.9">特性</th><th colSpan="1" rowSpan="1" width="397.31">cookie</th><th colSpan="1" rowSpan="1" width="294.95">sessjonStorage</th><th colSpan="1" rowSpan="1" width="317">localstorage</th></tr><tr><td colSpan="1" rowSpan="1" width="32">数据生命期</td><td colSpan="1" rowSpan="1" width="239">生成时就会被指定一个maxAge值，这就是cookie的生存 周期，在这个周期内cookie有效，默认关闭浏览器失效</td><td colSpan="1" rowSpan="1" width="71">页面会话期间可用</td><td colSpan="1" rowSpan="1" width="131">除非数据被清除，否则一直 存在</td></tr><tr><td colSpan="1" rowSpan="1" width="32">存放数据大小</td><td colSpan="1" rowSpan="1" width="239">4K左右(因为每次http请求都会携带cookie)</td><td colSpan="2" rowSpan="1" width="202">一般5M或更大</td></tr><tr><td colSpan="1" rowSpan="1" width="32">与服务器通信</td><td colSpan="1" rowSpan="1" width="239">由对服务器的请求来传递，每次都会携带在HTTP头中 如果使用cookie保存过多数据会带来性能问题</td><td colSpan="2" rowSpan="1" width="202">数据不是由每个服务器请求传递的，而是只有在请求时使用数据，不参与和服务器的通信</td></tr><tr><td colSpan="1" rowSpan="1" width="32">易用性</td><td colSpan="1" rowSpan="1" width="239">cookie需要自己封装setCookie,getCookie</td><td colSpan="2" rowSpan="1" width="202">可以用源生接口，也可再次封装来对Object和 Array有更好的支持</td></tr><tr><td colSpan="1" rowSpan="1" width="32">共同点</td><td colSpan="3" rowSpan="1" width="442">都是保存在浏览器端，和服务器端的session机制不同</td></tr></tbody></table><p><br></p>

DreamCoders/CoderGuide

Content Risk Flag

Comments (0)

DreamCoders/CoderGuide .gitee-modal { width: 500px !important; }

Content Risk Flag