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

Kdownk

已于 2023-07-15 09:33:21 修改

阅读量179

点赞数

文章标签：前端

于 2023-07-15 09:28:44 首次发布

本文链接：https://blog.csdn.net/kdownk/article/details/131735078

版权

文章介绍了Web存储的几种主要方式，包括cookie的会话管理与跟踪分析，但其容量限制和性能消耗问题；localStorage和sessionStorage提供更大存储空间，前者永久存储，后者随页面关闭清除；IndexedDB作为非关系型数据库，提供近乎无限的存储空间并支持快速查询。

摘要由CSDN通过智能技术生成

1、cookie

主要用于三个方面：

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

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

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

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

2、localStorage

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

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

3、sessionStorage

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

4、IndexedDB

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

关注