localStorage: localStorage 的生命周期是永久的,关闭页面或浏览器之后 localStorage 中的数据也不会消失。localStorage 除非主动删除数据,否则数据永远不会消失
sessionStorage: sessionStorage 的生命周期是仅在当前会话下有效。sessionStorage 引入了一个“浏览器窗口”的概念,sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage 也是不一样的
cookie: cookie生命期为只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。 存放数据大小为4K左右, 有个数限制(各浏览器不同),一般不能超过20个。缺点是不能储存大数据且不易读取
正文Cookie数据生命性:一般由服务器生成,可设置失效时间。(也可以由客户端生成)存放数据大小: 一般大小不能超过4KB作用域:Cookie的作用域仅仅由domain和path决定,与协议和端口无关与服务器端通信:浏览器每次向服务器发出请求,就会自动把当前域名下所有未过期的Cookie一同发送到服务器(会带来额外的性能开销)易用性:缺乏数据操作接口(document.cookie)。适用场景:只有那些每次请求都需要让服务器知道的信息(保持用户的登录状态),才应该放在 Cookie 里面。localStorage数据生命性::存储在 localStorage 的数据可以长期保留;存放数据大小: 一般为5MB作用域:localStorage的作用域是限定在文档源级别的。文档源通过协议、主机名以及端口三者来确定。与服务器端通信:不会自动把数据发给服务器,仅在本地保存。易用性:有很多易用的数据操作接口,比如setItem、getItem、removeItem适用场景:常用于长期登录(+判断用户是否已登录),适合长期保存在本地的数据sessionStorage数据生命性:sessionStorage 里面的数据在页面会话结束(关闭对应浏览器标签或窗口)时会被清除。存放数据大小: 一般为5MB作用域:sessionStorage的作用域也是限定在文档源级别。但需要注意的是,如果相同文档源的页面渲染在不同的标签中,sessionStorage的数据是无法共享的。与服务器端通信:不会自动把数据发给服务器,仅在本地保存。易用性:有很多易用的数据操作接口,比如setItem、getItem、removeItem适用场景:敏感账号一次性登录;Web Storage (localStorage、sessionStorage)的优势存储空间更大更节省流量(没有额外性能开销)获取数据从本地获取会比服务器端获取快得多,所以显示更快IndexedDB(补充内容)IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。
IndexedDB 不属于关系型数据库(不支持 SQL 查询语句),更接近 NoSQL 数据库。
IndexedDB储存空间大,一般来说不少于 250MB,甚至没有上限。
IndexedDB不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象)。
提供查找接口,还能建立索引
异步操作:IndexedDB 操作时不会锁死浏览器,用户依然可以进行其他操作,这与 LocalStorage 形成对比,后者的操作是同步的。异步设计是为了防止大量数据的读写,拖慢网页的表现。