前端储存的⽅式有哪些？

类别：浏览器 / 日期：2023-02-02 / 浏览：257 / 评论：0

cookies： 在 HTML5 标准前本地储存的主要⽅式，优点是兼容性好， 请求头⾃带 cookie⽅便，缺点是⼤⼩只有 4k，⾃动请求头加⼊cookie 浪费流量，每个 domain 限制 20 个 cookie，使⽤起来麻烦，需要⾃ ⾏封装；

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

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

Web SQL：2010 年被 W3C 废弃的本地数据库数据存储⽅案，但是主流 浏览器（⽕狐除外）都已经有了相关的实现，web sql 类似于 SQLite， 是真正意义上的关系型数据库，⽤sql进⾏操作，当我们⽤JavaScript 时要进⾏转换，较为繁琐；

IndexedDB：是被正式纳⼊HTML5 标准的数据库储存⽅案，它是 NoSQL 数据库，⽤键值对进⾏储存，可以进⾏快速读取操作，⾮常适合 web 场景，同时⽤JavaScript 进⾏操作会⾮常便。