前端的几种存储方式

总结：前端常用的四种存储方式有cookie、localStorage、sessionStorage、indexedDB

	容量	生命周期	通信
cookie	4kb	可以设置	每次发送请求都会携带在header中
localStorage	5M	永久（需要手动清除）	不参与
sessionStorage	5M	仅在当前对话保留	不参与
indexedDB	不限	永久（需要手动清除）	不参与

 

1、cookie

主要用于三个方面：

• 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）

• 个性化设置（如用户自定义设置、主题等）

• 浏览器行为跟踪（如跟踪分析用户行为等）

优点：兼容性好，请求头携带cookie很方便；缺点：容量小，上限只有4kb，每次请求都自动携带会消耗性能，会被利用与CSRF(跨站请求伪造）攻击;cookie的原生api需要拼接字符串，为了方便一般会再进行封装。

2、localStorage

HTML5加⼊的以键值对(Key-Value)为标准的存储⽅式，优点是操作⽅便，永久性储存（除⾮⼿动删除），⼤⼩为5M。

localStorage 中的键值对总是以字符串的形式存储，对于对象、整数 key 值会自动转换成字符串形式。

3、sessionStorage

与localStorage基本类似，区别是sessionStorage当⻚⾯关闭后会被清理，⽽且与cookie、localStorage不同，他不能在所有同源窗⼝中共享，是会话级别的储存⽅式，会话结束时会被清除

4、IndexedDB

是非关系型数据库，基于文件存储，理论上容量无上限（基于硬盘容量）；⽤键值对进⾏储存，可以进⾏快速读取操作；所有操作都要在回调中进行