当前位置: 首页 > Web前端 > HTML5

Cookie、localStorage、seesionStorage详解

时间:2023-04-04 23:33:29 HTML5

前言这几个API的发展历史?这些API的优缺点是什么?这些API的使用场景有哪些?具体怎么用我就不说了,直接看文档就可以了。参考了很多文章,现在总结一下我看过的。发展历程长期以来,本地存储能力一直是区分桌面应用和Web应用的一大优势。对于桌面应用程序,操作系统通常会提供一个抽象层来帮助应用程序保存其本地数据。但遗憾的是,由于某些原因,在web发展史上,很长一段时间内,cookie是唯一可以在用户本地存储少量数据的方式。随着现代浏览器开始支持各种存储方式,cookie的部分功能逐渐被取代。cookies的优缺点优点:可以轻松控制cookie的生命周期。持久数据。可以设置范围。缺点:cookies的数量和长度有限制,不同浏览器数量不同。长度不能超过4KB,否则会被截断。浏览器的每一次请求都会携带cookie数据,这会带来额外的性能开销和带宽浪费(尤其是在移动开发环境中)。Cookie以单个字符串的形式保存在客户端,使用原生js不利于运行。Cookie更容易受到安全攻击。localStorage的优缺点优点:以键值对的形式存储,存储原始值,浏览器提供更易操作的API。更大的存储空间,同一个域最多可以存储5MB。不会在每个HTTP请求中携带。遵循同源策略,保存数据会相对安全。缺点:不能直接控制生命周期,需要用js封装后才能操作。如果服务端需要客户端的存储信息,需要手动添加。sessionStorage的优缺点sessionStorage与localStorage基本相同,都属于WebStorage,返回一个Storage对象。不同的是,当sessionStorage关闭浏览器或当前标签时(有人说关闭标签不清除,但规范中写到sessionStorage是根据浏览上下文呈现的),存储的数据会被清除.应用场景cookie由于其实现特点,更多的用于保存服务器可以获取的数据,保存用户的个人用户信息,让服务器知道当前用户是谁,比如保存sessionId。localStorage用于服务客户端,可以保存主题设置和用户配置的一些信息。sessionStorage更像是localStorage的补充,可以用来保存页面的session信息。参考文章深入HTML5:HTML5本地存储(LocalStorage)前世今生(一)HTTPcookieCookie工作原理及优缺点LocalStoragevsCookiessessionstorage、localstorage和Cookies有什么区别?