前端有哪些数据存储方式

主要存在四种：cookie localStorage sessionStorage indexedDB。

cookies：

cookie 是一些数据，存储在你电脑上的文本文件中。当web服务器向浏览器发送web页面时，在连接关闭后，服务端不会记录用户的信息。Cookie的作用就是用于解决如何记录客户端的用户信息。优点是兼容性好，请求头⾃带cookie⽅便，缺点是⼤⼩只有4k，⾃动请求头加⼊cookie浪费流量，每个domain限制20个cookie，使⽤起来麻烦需要⾃⾏封装。

1. 当用户访问web页面时，他的名字记录在cookie中。
2. 在用户下一次访问该页面时，可以在cookie中读取用户的访问记录。

localStorage：

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

1. 允许在浏览器中存储key/value对的数据。
2. 用于长期保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
3. 属性是只读的。

sessionStorage：

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

1. 允许在浏览器中存储key/value对的数据。
2. 数据对象临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后也将删除这些数据。

IndexedDB：

是被正式纳⼊HTML5标准的数据库储存⽅案，它是NoSQL数据库，⽤键值对进⾏储存，可以进⾏快速读取操作，⾮常适合web场景，同时⽤JavaScript进⾏操作会⾮常⽅便。(这个我也不太了解，没用过，但是确实有)