JS本地存储的方式？区别？应用？

一、四种存储方式：

1.cookie

不超过4kb
在过期时间之前一直有效，即使会话或者浏览器关闭
会自动将数据传递到服务器，服务器也可以写cookie到客户端

2.localstorage

存储大小可以达到5M
只要不主动删除，数据永久储存
不会将数据发送给服务器，仅在本地储存
存储信息在同一域中是共享的，受同源策略的限制
设置 localstorage.setItem(‘username’,’cuuc’)
获取 localstorage.getItem(‘username’)
获取键名 localstorage.key(0)
删除 localstorage.removeItem(‘username’)
清空所有存储 localstorage.clear()
缺点：
1.无法像cookie一样设置过期时间；
2.只能存入字符串，无法直接 存入对象

3.sessionStorage

存储大小可以达到5M
页面关闭，sessionStorage将会删除数据
不会将数据发送给服务器，仅在本地储存
sessionStorage也具有上述相同的属性和方法

注意：localstorage、sessionStorage存储对象或数组时，需要将其更换为JSON字符串，然后再进行存储。
4.indexDB

优点：
储存量理论上没有上限
所有操作都是异步的，相比 LocalStorage 同步操作性能更高，尤其是数据量较大时
原生支持储存JS的对象
是个正经的数据库，意味着数据库能干的事它都能干
缺点：
操作非常繁琐
本身有一定门槛

---

二、区别：

1.存储大小：cookie数据大小不能超过4k，sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
2.有效时间：localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage数据在当前浏览器窗口关闭后自动删除；cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
3.数据与服务器的交互方式：cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端； sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

---

三、应用场景：

1.标记用户与跟踪用户行为的情况，推荐使用cookie
2.适合长期保存在本地额度数据（令牌），推荐使用localstorage
3.敏感账号一次性登录，推荐使用sessionStorage
4.存储大量数据的情况、在线文档保存编辑历史的情况，使用indexDB

---

localstorage和sessionStorage的区别：

1.存储周期不同；
2.共享范围不同：前者在同源页面共享存储的值；后者仅在当前页面共享存储的值；