一、本地存储localStorage
存储方式：键值对(key-value)的形式
时间：永久（只要不手动删除就会一直存在）
大小：每个域名5M
例如:
localStorage.token = "abecdssdgljgs;fgsdkgjls;dlk;sdgnsgf";
//获取记录
localStorage.getItem('token');
//存记录
localStorage.setItem('token','"abecdssdgljgs;fgsdkgjls;dlk;sdgnsgf');
//删记录
localStorage.removeItem('token');
二、本地存储sessionStorage
用法与localStorage相同，不过存储时间是关闭浏览器就清空所有数据
三、cookie
存储方式：纯文本，没有可执行代码
时间：可以设置，默认是会话结束的时候，当时间到期自动销毁
大小：一般为4KB
个数：一般为20个
//客户端设置cookie
document.cookie = 'name=xiaojingyu';
document.cookie = 'name=xiaojingyu;domain=juejin.cn';//增加了生效域名的设置
//客户端可选配置：expires、domain、path、secure(只能在https协议的网页。客户端设置secure类型的cookie才能成功，但无法设置httpOnly选项)
//读取cookie,避免xss攻击，能获取非 HttpOnly 类型的cookie
document.cookie;会通过分号+空格的形式返回：name=xiaojingyu;
//修改cookie，path/domain这几个选项一定要旧cookie 保持一致。否则不会修改旧值，而是添加了一个新的 cookie
document.cookie = 'name=abc';
//删除cookie,与修改一样，path/domain这几个选项一定要旧cookie 保持一致
把过期时间改为今天以前就可以
//服务端设置cookie,因为这里只涉及前端，后端就一笔带过~
Set-Cookie: value[; expires=date][; domain=domain][; path=path][; secure]
//一个set-Cookie字段只能设置一个cookie，当你要想设置多个 cookie，需要添加同样多的set-Cookie字段。
//服务端可以设置cookie 的所有选项：expires、domain、path、secure、HttpOnly
//通过 Set-Cookie 指定的这些可选项只会在浏览器端使用，而不会被发送至服务器端。
四、离线缓存Application cache
本地缓存应用所需文件
配置：
<!DOCTYPE HTML><html manifest="demo.appcache">//内容</html>
manifest.txt
CACHE MANIFEST #将在首次下载后进行缓存的文件# 2021-08-01 v1.0.0/theme.css/main.js NETWORK: #与服务器的连接的文件，且不会被缓存index.html FALLBACK: #配置无法访问的页面，通常为404页面/html/ /offline.html
服务器配置：
manifest文件需要配置正确的MIME-type，即 "text/cache-manifest"。
tomcat:
<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
API：
核心是applicationCache对象，有个status属性，表示应用缓存的当前状态：
0（UNCACHED） : 无缓存， 即没有与页面相关的应用缓存
1（IDLE） : 闲置，即应用缓存未得到更新
2 （CHECKING） : 检查中，即正在下载描述文件并检查更新
3 （DOWNLOADING） : 下载中，即应用缓存正在下载描述文件中指定的资源
4 （UPDATEREADY） : 更新完成，所有资源都已下载完毕
5 （IDLE） : 废弃，即应用缓存的描述文件已经不存在了，因此页面无法再访问应用缓存
五、数据库****indexedDB
索引数据库，常用于需要把很多数据存储在前端，这样减少与后端的交互，直接从本地存储数据。可以被网页的脚本创建并操作，可以存储大量数据，建立接口，查找索引。操作流程可以看这篇文章：传送门
注：不是关系型数据库，与后端数据库不太一样，不能使用sql语句进行查询。
记录一下经常面试问到的问题，正好参加一下8月更文挑战，5种类型的存储方式大家都要了解一下呀，可能写的不足，不喜勿喷，谢谢~
