前端存储

前端存储是一个老生常谈的话题了，面试的时候也经常会被问到，这篇文章将总结我们经常用到的存储方式。

Cookie

由服务器发送到用户服务器并保存在本地的一小块数据，在以后进行请求的时候会被携带并发送到服务器上，HTTP是无状态的，通过Cookie可以去记录状态

特点：

• 大小被限制在4KB
• 一个域名存放的cookie存放数量是有限的
• cookie数据始终在同源的http请求中携带
• 跨域携带Cookie的时候将withCredentials设置为true

Session

讲到了Cookie再讲讲Session
Cookie是被保存在客户端的，这样不是很安全，可能会造成一些非法的操作，为了考虑安全，可以使用session，session是存放在服务器上的

特点

• 存储数据量可以远大于4K
• 失效时间较短
• Cookie只能保存ASCII，Session可以存放任意的数据类型

h5存储

localStorage

是一种持久化的存储方式，只要不手动清除，数据永远存在

当然 有缺点：

• 大小只能在5M以下
• 只能在客户端使用
• 存储的信息在同一域是共享的，存在跨域问题
• 本质上是对字符串的读取，如果存储的内容多，会导致页面变卡

sessionStorage

只在当前的页面有效，一旦关闭了就失效，同时它的跨域更加严格，即使跳到另一个标签页，也会属于跨域

IndexedDB

浏览器提供的本地数据库，允许存储大量数据，提供查找接口，还能建立索引

特点：

• 异步
• 受到同源限制
• 键值对存储，主键不能有重复
• 持久化存储，清除浏览器缓存也不会被清除掉
• 支持事务，如果一步失败了，全部回滚到之前的状态

通常用于：

• 数据可视化
• 即时聊天
• 其他存储的大小太小了