[面试题]cookie和localstorage和sessionstorage的区别
- 存储大小:
cookie
数据大小不能超过4k
,sessionStorage
和localStorage
虽然也有存储大小的限制,但比cookie
大得多,可以达到5M或更大 - 有效时间:
localStorage
存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;sessionStorage
数据在当前浏览器窗口关闭后自动删除;cookie
设置的cookie
过期时间之前一直有效,即使窗口或浏览器关闭 - 数据与服务器之间的交互方式,
cookie
的数据会自动的传递到服务器,服务器端也可以写cookie
到客户端;sessionStorage
和localStorage
不会自动把数据发给服务器,仅在本地保存,因此可以避免 CSRF 攻击(诱导你去访问某个需要你的权限的接口,利用了浏览器会自动在所有请求里带上 Cookie 的特性)
[扩展]indexedDB存储方式
IndexedDB
的全称是 Indexed Database,从名字中就可以看出,它是一个数据库
相比于 LocalStorage,IndexedDB 的优点是
-
储存量理论上没有上限
-
Chrome 对 IndexedDB 储存空间限制的定义是:硬盘可用空间的三分之一
-
所有操作都是异步的,相比 LocalStorage 同步操作性能更高,尤其是数据量较大时
-
原生支持储存 JS 的对象
-
是个正经的数据库,意味着数据库能干的事它都能干
但是缺点也比较致命:
- 操作非常繁琐
- 本身有一定门槛(需要你懂数据库的概念)
如果不考虑 IndexedDB 的操作难度,其作为一个前端本地储存方案其实是接近完美的