早期Web使用cookie在浏览器端保存数据，但存在以下问题：
- cookie的大小限制在4KB
- 浏览器会限制所有站点在计算机上的存储cookie总数
- cookie会随着每次HTTP事务一起发送，会浪费一部分带宽
HTML5提供了WebStorage本地存储、IndexedDB本地数据库等，能够存储更多更复杂的数据。
一、WebStorage
WebStorage以Key-Value对的方式存储，容量有5M，分为两种：
- 永久性的本地存储localStorage，可以永久存储在浏览器端
- 会话级别的本地存储sessionStorage，关闭浏览器窗口数据会清空
浏览器支持：除了IE7及更早版本，其它浏览器均可支持
检查浏览器是否支持：
if(typeof(Storage) !== “undefined”)
{
// 支持
}else
{
// 不支持
}
操作API：
以下方法均用 loaclStorage 或 sessionStorage 调用 getItem(key) <=> sessionStorage.Key 获取值 setItem(key,value) <=> sessionStorage.Key = value 设置值 removeItem(key) length 返回key/value列表的长度 key(index) 返回对应索引的key值 clear() 清空存储（删除所有key/value对）
遍历：
var se = window.sessionStorage;
for(var i=0;i<se.length;i++)
{
console.log("{0}：{1}
".format(se.key(i),se.getItem(se.key(i))));
}
事件
当存储区域（localstorage、sessionstorage）被修改时，将触发storage事件。注意，该事件只会在同源页面触发，不会在发生修改的页面触发。
事件对象 StorageEvent
target 事件目标(DOM 树中的最大目标) type 事件的类型 bubbles 事件通常是否会出现冒泡 cancelable 事件是否可取消 key 键更改的key oldValue 正在更改键的旧值 newValue 正在更改键的新值 url 键更改的文档的地址 storageArea 受影响的存储对象
示例：
window.addEventListener("storage", (e) => {});
二、IndexedDB
与WebStorage使用简单字符串键值对不同，IndexedDB是为了能够在客户端储存大量的结构化数据，并使用索引高效检索的API。前者适合存储少量的数据，对于存储大量结构化的数据，则可使用IndexedDB本地数据库。
浏览器兼容性：所有主流浏览器都已兼容。
基本概念
数据库：IDBDatabase 对象 每个域名（严格的说是协议+域名+端口）都可以新建任意多的数据库。同一个时刻只能有一个版本的数据库存在 对象仓库：IDBObjectStore 对象 每个数据库包含若干个对象仓库，类似于关系型数据库中的表格 数据记录： 对象仓库保存的是数据记录，只有主键和数据体两部分。数据体可以是任意数据类型。 索引： IDBIndex 对象 数据记录的读写和删改，都要通过事务完成。事务对象提供error、abort和complete三个事件，用来监听操作结果。 事务： IDBTransaction 对象 操作请求：IDBRequest 对象 指针： IDBCursor 对象 主键集合：IDBKeyRange 对象
打开数据库
var request = window.indexedDB.open(databaseName, version); // 如果不存在则创建
open 请求不会立即打开数据库或者开始一个事务， 而是返回一个IDBRequest对象，这个对象通过error、success、upgradeneeded三个事件处理打开数据库的操作结果。
request.onerror = function (event) {
console.log('数据库打开报错');
};
var db;
request.onsuccess = function (event) {
db = request.result;
console.log('数据库打开成功');
};
// 如果指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件upgradeneeded
request.onupgradeneeded = function (event) {
db = event.target.result;
}
通过事件对象的target.result属性，拿到数据库实例
三、Web SQL Datebase
HTML5 IndexedDB和Web SQL Database都是本地数据库数据存储，Web SQL Database数据库要出来的更早，然并卵。从2010年11月18日W3C宣布舍弃Web SQL database草案开始，就已经注定Web SQL Database数据库是明日黄花。因此在此只做一些了解。
Web SQL Database允许引用程序通过一个异步JavaScript接口访问SQLlite数据库。浏览器兼容性：主流浏览器除IE、Edge、Firefox
HTML5对Web SQL的操作包含以下3个核心方法：
- openDatebase：用来创建或打开数据库
- transaction：允许我们执行事务处理
- executeSql：用于执行SQL语句
1.创建/打开数据库
var db = openDatabase(name,version,text,size,callback) 参数：数据库名称、版本号、描述文本、数据库大小(字节)、创建回调(非必须)
2.执行事务
db.transaction(function (tx) {
// ... tx为transaction对象的引用。
});
3.写SQL语句
executeSql(sql,[],datahandler,errorhandler) 参数：要执行的sql语句，sql语句中占位符"?"对应的参数值，执行成功时调用的回调，失败时调用的回调
示例：
$(function(){
var db = openDatabase("data.db","1.0","demo data",1024*1024);
if(!db)
{
alert("该浏览器不支持Web SQL");
}
db.transaction(function (tx) {
// 创建表
tx.executeSql("create table if not exists Demo(uName text null,title text null ,words text null)",
[],function (tx,result) { /*result返回的结果*/ },function (tx,message) { /*message是错误信息的描述*/ });
// 写入数据
tx.executeSql("insert into Demo(uName,title,words)values(?,?,?)",["姓名","标题","内容"],
function (tx,data) { alert(data) }, function (tx, error) { alert(error) });
// 读取数据
tx.executeSql("select * from deom",[],function (tx, data) { alert(data) },
function (tx, error) { alert(error) });
});
});
四、Application Cache（应用缓存）
HTML5引入了应用程序缓存技术，意味着web应用可进行缓存，并在没有网络的情况下使用，通过创建cache manifest文件，可以轻松的创建离线应用。
Application Cache带来的三个优势是：① 离线浏览 ② 提升页面载入速度 ③ 降低服务器压力；缺点是：① 更新版本后，必须刷新一次才会启动新版本 ② 进入离线存储的页面，如果不更新版本，是会将其当成静态页面不请求 ③ 无法进行灰度发布等策略。
Application Cache和WebStorage在使用上的区别是，后者存储非关键性数据，做锦上添花的事情，前者用于存储静态资源。
使用方法：
1.配置manifest文件
<html manifest="demo.appcache"> ... </html>
2.manifest文件
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
① CACHE MANIFEST - 列出需要缓存的文件（必需）
② NETWORK - 列出不需要被缓存的文件（非必需）
③ FALLBACK - 列出规定当页面无法访问时的回退页面（文件,比如 404 页面，非必需）
CACHE MANIFEST # 缓存文件爱你 /theme.css /main.js NETWORK: # 不需要缓存的文件 login.jsp FALLBACK: /html/ /offline.html
3.服务器端
manifest文件需要配置正确的MIME-type，即 "text/cache-manifest"，必须在web服务器上进行配置。
4.常用API
核心是applicationCache对象，有个status属性，表示应用缓存的当前状态：
0 （UNCACHED）: 无缓存， 即没有与页面相关的应用缓存 1 （IDLE）: 闲置，即应用缓存未得到更新 2 （CHECKING）: 检查中，即正在下载描述文件并检查更新 3 （DOWNLOADING）: 下载中，即应用缓存正在下载描述文件中指定的资源 4 （UPDATEREADY）: 更新完成，所有资源都已下载完毕 5 （IDLE）: 废弃，即应用缓存的描述文件已经不存在了，因此页面无法再访问应用缓存
5.JS事件（表示应用缓存的状态的改变）
checking : 在浏览器为应用缓存查找更新时触发 error : 在检查更新或下载资源期间发送错误时触发 noupdate : 在检查描述文件发现文件无变化时触发 downloading : 在开始下载应用缓存资源时触发 progress：在文件下载应用缓存的过程中持续不断地下载地触发 updateready : 在页面新的应用缓存下载完毕触发 cached : 在应用缓存完整可用时触发
6.更新缓存
1.更新manifest文件 2.清除浏览器缓存 3.通过JavaScript操作
applicationCache.addEventListener('updateready', function(e) {
if (applicationCache.status == applicationCache.UPDATEREADY) {
applicationCache.swapCache(); //使用新版本资源
window.location.reload(); //刷新页面
}
}, false);
6.注意事项
1. 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）
2. 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
3. 引用manifest的html必须与manifest文件同源，在同一个域下
4. 浏览器会自动缓存引用manifest文件的HTML文件，这就导致如果改了HTML内容，也需要更新版本才能做到更新。
5. manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
6. FALLBACK中的资源必须和manifest文件同源
7. 更新完版本后，必须刷新一次才会启动新版本（会出现重刷一次页面的情况），需要添加监听版本事件。
8. 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
9. 当manifest文件发生改变时，资源请求本身也会触发更新
7.离线缓存与传统浏览器缓存的区别
1. 离线缓存是针对整个应用，浏览器缓存是单个文件
2. 离线缓存断网了还是可以打开页面，浏览器缓存不行
3. 离线缓存可以主动通知浏览器更新资源
参考资料：
http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
https://www.cnblogs.com/LuckyWinty/p/5699117.html
https://www.cnblogs.com/yexiaochai/p/4271834.html