Javascript本地存储的方式有哪些？ 区别及应用场景?
1. Cookie
Cookie 是网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据。Cookie 通常包含了用户的一些个人信息，如用户名、密码、浏览记录、偏好设置等。Cookie 一般在用户访问网站时自动发送给浏览器，并保存在用户本地终端上，直到用户关闭浏览器。
Cookie 的缺点是不安全，容易被篡改，而且大小限制为4KB，所以一般不存储大量数据。
2. LocalStorage
LocalStorage 是 HTML5 新增的存储机制，它是一种持久化的本地存储，可以将数据保存在用户本地终端上，除非主动删除，否则数据会在浏览器关闭后自动删除。
LocalStorage 的优点是数据持久化，不会丢失数据，大小没有限制。
3. SessionStorage
SessionStorage 和 LocalStorage 类似，也是 HTML5 新增的存储机制，但它是针对一个 session 的存储，当页面关闭后，SessionStorage 中的数据也会被清除。
4. IndexedDB
IndexedDB 是 HTML5 新增的数据库存储机制，它是一种非关系型数据库，可以存储大量结构化数据。
IndexedDB 的优点是支持事务，支持索引，查询速度快。
5. 区别及应用场景
| | Cookie | LocalStorage | SessionStorage | IndexedDB |
| --- | --- | --- | --- | --- |
| 生命周期 | 一般由服务器生成，可以设置过期时间 | 除非手动删除，否则数据在浏览器关闭后自动删除 | 页面关闭后自动删除 | 除非手动删除，否则数据在浏览器关闭后自动删除 |
| 存储大小 | 4KB | 除非手动删除，否则数据没有大小限制 | 页面关闭后自动删除 | 无限存储 |
| 存储位置 | 客户端 |
| 安全性 | 不安全 | 不安全 | 不安全 | 安全 |
| 应用场景 | 保存用户信息，如登录状态、购物车、游戏分数等 | 保存小量数据，如表单数据、页面偏好设置等 | 保存小量数据，如表单数据、页面偏好设置等 | 保存大量结构化数据，如用户数据、文件、音乐、视频等 |
6. 总结
Cookie、LocalStorage、SessionStorage、IndexedDB 都是 HTML5 新增的本地存储机制，它们的区别和应用场景各有不同。Cookie 一般用于保存少量数据，LocalStorage 和 SessionStorage 用于保存大量数据，IndexedDB 用于保存结构化数据。
IMG:
