前端三种本地存储方式+indexedDB浏览器数据库存储

1.cookie存储：

特征：
    1.不同的浏览器存放的cookie位置不一样，也是不能通用的。
    2.cookie的存储是以域名形式进行区分的，不同的域下存储的cookie是独立的。
    3.我们可以设置cookie生效的域（当前设置cookie所在域的子域），也就是说，我们能够操作的cookie是当前域以及当前域下的所有子域
    4.一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样,一般为20个。
    5.每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样，一般为4KB。
    6.cookie也可以设置过期的时间，默认是会话结束的时候，当时间到期自动销毁

工作机制：
    ①：当网页要发http请求时，浏览器会先检查是否有相应的cookie，有则自动添加在request header中的cookie字段中。这些是浏览器自动帮我们做的，而且每一次http请求浏览器都会自动帮我们做。这个特点很重要，因为这关系到“什么样的数据适合存储在cookie中”。
    ②：存储在cookie中的数据，每次都会被浏览器自动放在http请求中，如果这些数据并不是每个请求都需要发给服务端的数据，浏览器这设置自动处理无疑增加了网络开销；但如果这些数据是每个请求都需要发给服务端的数据（比如身份认证信息），浏览器这设置自动处理就大大免去了重复添加操作。所以对于那种设置“每次请求都要携带的信息（最典型的就是身份认证信息）”就特别适合放在cookie中，其他类型的数据就不适合了。

设置cookie:
    document.cookie = '名字=值';
    document.cookie = 'username=cfangxu;domain=baike.baidu.com'//并且设置了生效域
读取cookie：
    document.cookie获取到cookie字符串,包含了当前网站下的所有cookie，会把所有的cookie通过一个分号+空格的形式串联起来
修改cookie：
    重新赋值即可 => document.cookie='name=张三'(更改name对应的信息为张三)
删除cookie：
    把要删除的cookie的过期时间设置成已过去的时间；
    document.cookie = '名称=值;expires=' + GMT(格林威治时间)格式的日期型字符串;
注意事项：
    如果只设置一个值，那么算cookie中的value; =》 document.cookie='aa' 设置了一个没有key对应的value
    设置的两个cookie,key值如果设置的相同，下面的也会把上面的覆盖。（第二个相当于更改）

2.localStorage永久存储

特点：
    生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
    存储的信息在同一域中是共享的。
    当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件。
    大小：据说是5M（跟浏览器厂商有关系）
    在非IE下的浏览中可以本地打开。IE浏览器要在服务器中打开。
    localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
    localStorage受同源策略的限制

设置localStorage：
    localStorage.setItem(key,value); => localStorage.setItem('name','里斯');
(注意如果直接存储对象会被调用其toString转为字符串类型，但是对象.toString会被转为[object object],数组.toString会将[]转为“”之后样子的字符串，我们可以使用JSON.stringify()转为JSON字符串存储，取得时候再转为对象即可)
获取localStorage：
    localStorage.getItem(key); =>  localStorage.getItem('name')
删除localStorage：
    localStorage.removeItem(key); => localStorage.removeItem('name');
全部删除：
    localStorage.clear();

storage事件：(storage是window的事件)
    当前页面对storage的操作会触发其他页面的storage事件,但是却不会触发当前页的storage事件。
    不过我们可以自己来控制storage更改来触发当前页的storage事件(https://www.cnblogs.com/wawahaha/p/4966070.html)

storage事件的事件对象是一个storageEvent对象：

3.sessionStorage会话存储

特点：
    用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁，或者在新窗口打开同源的另一个页面，sessionStorage也是没有的。

设置sessionStorage：
    sessionStorage.setItem(key,value); => sessionStorage.setItem('name','里斯');
获取sessionStorage：
    sessionStorage.getItem(key); =>  sessionStorage.getItem('name')
删除sessionStorage：
    sessionStorage.removeItem(key); => sessionStorage.removeItem('name');
全部删除：
    sessionStorage.clear();

cookie,localStorage,sessionStorage区别

相同：在本地（浏览器端）存储数据。

不同：
localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。
localStorage是永久存储，除非手动删除。
sessionStorage当会话结束（当前页面关闭的时候，自动销毁）
cookie的数据会在每一次发送http请求的时候，同时发送给服务器而localStorage、sessionStorage不会。

4.indexedDB浏览器数据库存储

见本人另一博文：https://blog.csdn.net/qq_40959677/article/details/94352144