一、引言
js中提供了多种数据存储技术，如Cookie、LocalStorage、SessionStorage和IndexedDB。
二、Cookie
1.Cookie是什么
Cookie是存储在客户端的小型文本文件，由服务器发送到用户的浏览器，并随后每次请求都会被发送回服务器。它用于跟踪用户会话和存储少量数据，例如用户身份，登录状态等。Cookie的最大容量为4KB。Http请求中自动携带，可自行设置过期时间。
2.如何设置和获取cookie?
3.Cookie的限制和安全性
①.Cookie的大小通常为4kb左右
②.Cookie会在每次HTTP请求中被发送到服务器，增加网络流量。
③.Cookie存储在客户端，可能被恶意脚本或跨站点脚本攻击利用。
④.Cookie可以设置过期时间，也可以通过设置路径、域名和安全标志来限制访问
三、LocalStorage
1、LocalStorage是什么？
LocalStorage是HTML5提供的一种持久化的本地存储机制，用于在浏览器中存储键值对数据
2、如何使用LocalStorage？
3、LocalStorage的限制和安全性
① LocalStorage的容量通常在5MB到10MB之间。
② LocalStorage存储在客户端，不会随着每次请求被发送到服务器。
③ LocalStorage在同源策略下是安全的，不同域的页面无法访问彼此的数据。
④ LocalStorage是持久化的，数据会一直保存在客户端直到被主动清除。
四、SessionStorage
1、SessionStorage是什么？
SessionStorage是一种在浏览器中存储数据的机制，它提供了一个会话级别的解决方案。数据存储在键值对中，只在当前会话中有效，当会话结束时数据将被删除。
2、如何使用SessionStorage？
① SessionStorage的容量通常在5MB到10MB之间。
② SessionStorage存储在客户端，不会随着每次请求被发送到服务器。
③ SessionStorage在同源策略下是安全的，不同域的页面无法访问彼此的数据。
④ SessionStorage的数据在浏览器会话结束时会被清除。
五、IndexedDB
1、IndexedDB是什么？
IndexedDB是一种在浏览器中存储大量结构化数据的机制，它提供了一个类似数据库的解决方案。它允许你存储和检索对象，支持事务和索引。
2、IndexedDB的基本使用
IndexedDB因为个别的文件问题，然后导致有报错
3、IndexedDB的限制和安全性
- IndexedDB的容量通常较大，可以存储大量数据。
- IndexedDB存储在客户端，不会随着每次请求被发送到服务器。
- IndexedDB在同源策略下是安全的，不同域的页面无法访问彼此的数据。
- IndexedDB提供了强大的查询和索引功能，支持事务操作。
六、四种方式的区别
1、数据容量
cookie：通常限制在4KB左右
LocalStorage和SessionStorage：通常限制在5MB到10MB之间，具体容量限制可以根据浏览器而有所不同。
indexedDB：容量较大，可以存储大量数据。甚至有人说理论上无限大，上限是硬盘容量大小。
2、生命周期
cookie可以设置过期时间，可以在浏览器会话中持久保存数据
LocalStorage是存储在本地浏览器，除非清楚数据
SessionStorage仅在当前打开的网页会话时有效，当关闭浏览器或窗口时数据就会被清理
IndexedDB数据是长期存储的，除非显示被删除
3、安全性
cookie：可以设置路径、域名和安全标志来限制访问，但仍然容易受到恶意脚本或跨站点脚本攻击的影响。
LocalStorage、SessionStorage和indexedDB：在同源策略下是安全的，不同域的页面无法访问彼此的数据。
4、功能和灵活性
cookie：主要用于会话跟踪和存储少量数据，功能相对简单。
LocalStorage和SessionStorage：提供了基本的键值对存储，适合用于存储较大量的数据。
indexedDB：提供了更强大的查询和索引功能，支持事务操作，适合存储和操作大量结构化数据。
