Cookie和HTML5新增localStorage、sessionStorage的区别
前言
本篇文章总结于MDN文档、相关书籍、以及大量的相关文章。
如果发现文章存在错误,请各位大佬指出!!!
如果觉得文章不错,记得点赞、收藏!!
正文
Cookie
数据生命性
:一般由服务器生成,可设置失效时间。(也可以由客户端生成)存放数据大小
: 一般大小不能超过4KB作用域
:Cookie的作用域仅仅由domain
和path
决定,与协议和端口无关与服务器端通信
:浏览器每次向服务器发出请求,就会自动把当前域名下所有未过期的Cookie一同发送到服务器(会带来额外的性能开销)易用性
:缺乏数据操作接口(document.cookie)。适用场景
:只有那些每次请求都需要让服务器知道的信息(保持用户的登录状态),才应该放在 Cookie 里面。
localStorage
数据生命性
::存储在 localStorage 的数据可以长期保留;存放数据大小
: 一般为5MB作用域
:存储在 localStorage 中的数据特定于页面的协议。也就是说http://example.com
与https://example.com
的 localStorage 相互隔离。与服务器端通信
:不会自动把数据发给服务器,仅在本地保存。易用性
:有很多易用的数据操作接口,比如setItem、getItem、removeItem适用场景
:常用于长期登录(+判断用户是否已登录),适合长期保存在本地的数据
sessionStorage
数据生命性
:sessionStorage 里面的数据在页面会话结束(关闭对应浏览器标签或窗口)时会被清除。存放数据大小
: 一般为5MB作用域
:存储在 sessionStorage 中的数据特定于页面的协议。也就是说http://example.com
与https://example.com
的 sessionStorage 相互隔离。与服务器端通信
:不会自动把数据发给服务器,仅在本地保存。易用性
:有很多易用的数据操作接口,比如setItem、getItem、removeItem适用场景
:敏感账号一次性登录;
Web Storage (localStorage、sessionStorage)的优势
- 存储空间更大
- 更节省流量(没有额外性能开销)
- 获取数据从本地获取会比服务器端获取快得多,所以显示更快
IndexedDB(补充内容)
-
IndexedDB
就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。 -
IndexedDB
不属于关系型数据库(不支持 SQL 查询语句),更接近 NoSQL 数据库。 -
IndexedDB
储存空间大,一般来说不少于 250MB,甚至没有上限。 -
IndexedDB
不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象)。 -
提供查找接口,还能建立索引
-
异步操作
:IndexedDB 操作时不会锁死浏览器,用户依然可以进行其他操作,这与 LocalStorage 形成对比,后者的操作是同步的。异步设计是为了防止大量数据的读写,拖慢网页的表现。