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 的操作难度，其作为一个前端本地储存方案其实是接近完美的