html5本地存儲數據
HTML5本地存儲——Web SQL Database
在HTML5 WebStorage介紹了html5本地存儲的Local Storage和Session Storage，這兩個是以鍵值對存儲的解決方案，存儲少量數據結構很有用，但是對於大量結構化數據就無能為力了，靈活大不夠強大。
Web SQL Database
我們經常在資料庫中處理大量結構化數據，html5引入Web SQL Database概念，它使用 SQL 來操縱客戶端資料庫的 API，這些 API 是非同步的，規范中使用的方言是SQLlite，悲劇正是產生於此，Web SQL Database規范頁面有著這樣的聲明
This document was on the W3C Recommendation track but specification work has stopped. The specification reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.
大概意思就是
這個文檔曾經在W3C推薦規范上，但規范工作已經停止了。目前已經陷入了一個僵局：目前的所有實現都是基於同一個SQL後端（SQLite），但是我們需要更多的獨立實現來完成標准化。
也就是說這是一個廢棄的標准了，雖然部分瀏覽器已經實現，但。。。。。。。
三個核心方法
但是我們學一下也沒什麼壞處，而且能和現在W3C力推的IndexedDB做比較，看看為什麼要廢棄這種方案。Web SQL Database 規范中定義的三個核心方法：
openDatabase：這個方法使用現有資料庫或新建資料庫來創建資料庫對象
transaction：這個方法允許我們根據情況控制事務提交或回滾
executeSql：這個方法用於執行SQL 查詢
openDatabase
我們可以使用這樣簡單的一條語句，創建或打開一個本地的資料庫對象
var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);
openDatabase接收五個參數：
資料庫名字
資料庫版本號
顯示名字
資料庫保存數據的大小（以位元組為單位 )
回調函數（非必須)
如果提供了回調函數，回調函數用以調用 changeVersion() 函數，不管給定什麼樣的版本號，回調函數將把資料庫的版本號設置為空。如果沒有提供回調函數，則以給定的版本號創建資料庫。
transaction
transaction方法用以處理事務，當一條語句執行失敗的時候，整個事務回滾。方法有三個參數
包含事務內容的一個方法
執行成功回調函數（可選）
執行失敗回調函數（可選）
db.transaction(function (context) {
context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');
});
這個例子中我們創建了一個table，並在表中插入三條數據，四條執行語句任何一條出現錯誤，整個事務都會回滾
executeSql
executeSql方法用以執行SQL語句，返回結果，方法有四個參數
查詢字元串
用以替換查詢字元串中問號的參數
執行成功回調函數（可選）
執行失敗回調函數（可選）
在上面的例子中我們使用了插入語句，看個查詢的例子
db.transaction(function (context) {
context.executeSql('SELECT * FROM testTable', [], function (context, results) {
var len = results.rows.length, i;
console.log('Got '+len+' rows.');
for (i = 0; i < len; i++){
console.log('id: '+results.rows.item(i).id);
console.log('name: '+results.rows.item(i).name);
}
});
完整示例
<!DOCTYPE HTML>
<html>
<head>
<title>Web SQL Database</title>
</head>
<body>
<script type="text/javascript">
var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (context) {
context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');
});
db.transaction(function (context) {
context.executeSql('SELECT * FROM testTable', [], function (context, results) {
var len = results.rows.length, i;
console.log('Got '+len+' rows.');
for (i = 0; i < len; i++){
console.log('id: '+results.rows.item(i).id);
console.log('name: '+results.rows.item(i).name);
}
});
});
</script>
</body>
</html>
最後
由於Web SQL Database規范已經被廢棄，原因說的很清楚，當前的SQL規范採用SQLite的SQL方言，而作為一個標准，這是不可接受的，每個瀏覽器都有自己的實現這還搞毛的標准。這樣瀏覽器兼容性就不重要了，估計慢慢會被遺忘。不過Chrome的控制台真心好用啊，神馬cookie、Local Storage、Session Storage、Web SQL、IndexedDB、Application Cache等html5新增內容看的一清二楚，免去了很多調試代碼工作。
B. 簡述html5本地存儲的優點
在 HTML5 之前，應用程序數據只能存儲在 cookie 中，包括每個伺服器請求。本地存儲則更安全，並且可在不影響網站性能的前提下將大量數據存儲於本地。
與 cookie 不同，存儲限制要大得多（至少5MB），並且信息不會被傳輸到伺服器。
本地存儲經由起源地（origin）（經由域和協議）。所有頁面，從起源地，能夠存儲和訪問相同的數據。
C. html5本地存儲怎麼做，html5本地存儲實例詳解
html5本地存儲實例詳解之創建
1
首先我們新建一個html5的空白文檔，小編這里演示用的是Dreamweaver CS6，當然其他文本編輯器也可以。
2
保存之後開始構建html，我們這里示例用一個文本框兩個按鈕和一個顯示數據的div，如下圖：
3
之後寫js事件，當點擊「保存」的時候，把文本框的內容保存到sessionStorage中，當點擊「顯示」的時候，把保存的數據從sessionStorage中讀取出來顯示在頁面上。
4
完整代碼如下，我們可以在瀏覽器預覽，然後點擊試試效果，可以發現能夠存儲和顯示。
5
按F12打開控制台，找到sessionStorage，會發現其是用鍵值對的方式存儲數據的。
6
localStorage跟sessionStorage類似，只是localStorage只要不刪除就會永久存儲在電腦上，而sessionStorage只要關閉了頁面就沒有了，這里小編就不再演示了。
END
html5本地存儲實例詳解之刪除
html5本地存儲的刪除其實也很簡單，也是打開控制台找到相應的存儲信息，在上面右擊刪除即可。
點擊刪除之後需要刷新一次頁面就會看到本地存儲的數據已經刪除了。
3
如果用代碼的話，就是.removeItem(key)這個了。
D. HTML5本地資料庫存儲數據代碼相關問題
一個網站如何能在客戶的瀏覽器存儲更多的數據呢？
在Html4的時代在瀏覽器端存儲點網站個性化的數據，尤其是用戶瀏覽器的痕跡，用戶的相關數據等一般只能存儲在Cookie中，但是大多是瀏覽器對於Cookie的限制也就逼迫網站存儲數據盡量精簡，想存儲復雜的、關系型的用戶數據就根本不可能了。但是進入Html5時代，這一切都不叫事...
一、本地存儲由來的背景
眾所周知Html4時代Cookie的大小、格式、存儲數據格式等限制，網站應用如果想在瀏覽器端存儲用戶的部分信息，那麼只能藉助於Cookie。但是Cookie的這些限制，也就導致了Cookie只能存儲一些ID之類的標識符等簡單的數據，復雜的數據就更別扯了。
下面是Cookie的限制：
1, 大多數瀏覽器支持最大為 4096 位元組的 Cookie。
2, 瀏覽器還限制站點可以在用戶計算機上存儲的 Cookie 的數量。大多數瀏覽器只允許每個站點存儲 20 個 Cookie；如果試圖存儲更多 Cookie，則最舊的 Cookie 便會被丟棄。
3, 有些瀏覽器還會對它們將接受的來自所有站點的 Cookie 總數作出絕對限制，通常為 300 個。
4, Cookie默認情況都會隨著Http請求發送到後台伺服器，但並不是所有請求都需要Cookie的，比如：js、css、圖片等請求則不需要cookie。
（1）setItem(key,value)：添加本地存儲數據。兩個參數，非常簡單就不說了。
（2）getItem(key):通過key獲取相應的Value。
（3）removeItem(key):通過key刪除本地數據。
（4）clear():清空數據。
- <script type="text/javascript">
- //添加key-value 數據到 sessionStorage
- sessionStorage.setItem("demokey", "hek.com");
- //通過key來獲取value
- var dt = sessionStorage.getItem("demokey");
- alert(dt);
- //清空所有的key-value數據。
- //sessionStorage.clear();
- alert(sessionStorage.length);
- </script>
（1）setItem(key,value)：添加本地存儲數據。兩個參數，非常簡單就不說了。
（2）getItem(key):通過key獲取相應的Value。
（3）removeItem(key):通過key刪除本地數據。
（4）clear():清空數據。
- <script type="text/javascript">
- //添加key-value 數據到 sessionStorage
- localStorage.setItem("demokey", "httpcom");
- //通過key來獲取value
- var dt = localStorage.getItem("demokey");
- alert(dt);
- //清空所有的key-value數據。
- //localStorage.clear();
- alert(localStorage.length);
- </script>
第一步：openDatabase方法：創建一個訪問資料庫的對象。
第二步：使用第一步創建的資料庫訪問對象來執行transaction方法，通過此方法可以設置一個開啟事務成功的事件響應方法，在事件響應方法中可以執行SQL.
第三步：通過executeSql方法執行查詢，當然查詢可以是：CRUD。
- //Demo：獲取或者創建一個資料庫，如果資料庫不存在那麼創建之
- var dataBase = openDatabase("student", "1.0", "學生表", 1024 * 1024, function () { });
1，資料庫名稱。
2，資料庫的版本號，目前來說傳個1.0就可以了，當然可以不填；
3，對資料庫的描述。
4，設置分配的資料庫的大小（單位是kb）。
5，回調函數(可省略)。
初次調用時創建資料庫，以後就是建立連接了。
- ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
qlQuery：需要具體執行的sql語句，可以是create、select、update、delete；
value1,value2..]：sql語句中所有使用到的參數的數組，在executeSql方法中，將s>語句中所要使用的參數先用「?」代替，然後依次將這些參數組成數組放在第二個參數中
ataHandler：執行成功是調用的回調函數，通過該函數可以獲得查詢結果集；
4,errorHandler：執行失敗時調用的回調函數；
Html5的設計者們，一開始就為Html5能成為富客戶端做好了准備。為了破解Cookie的一系列限制，Html5通過JS的新的API就能直接存儲大量的數據到客戶端瀏覽器，而且支持復雜的本地資料庫，讓JS簡直就是逆天了。Html5支持兩種的WebStorage，一種是永久性的本地存儲（localStorage），另外一種是會話級別的本地存儲（sessionStorage）。
二、會話級別的本地存儲：sessionStorage
在Html5中增加了一個Js對象：sessionStorage；通過此對象可以直接操作存儲在瀏覽器中的會話級別的WebStorage。存儲在sessionStorage中的數據首先是Key-Value形式的，另外就是它跟瀏覽器當前會話相關，當會話結束後，數據會自動清除，跟未設置過期時間的Cookie類似。
sessionStorage提供了四個方法來輔助我們進行對本地存儲做相關操作。
對於JS的學習和調試必須得有Chrome的調試工具輔助才能事半功倍。當然Chrome也是我最喜愛的Web開發輔助工具，非常簡單F12快捷鍵就立即打開工具了，包括IE也是這個快捷鍵。通過下圖就可以查看當前瀏覽器中的sessionStorage數據。
參考在線演示demo
三、永久本地存儲：localStorage
在最新的JS的API中增加了localStorage對象，以便於用戶存儲永久存儲的Web端的數據。而且數據不會隨著Http請求發送到後台伺服器，而且存儲數據的大小機會不用考慮，因為在HTML5的標准中要求瀏覽器至少要支持到4MB.所以，這完全是顛覆了Cookie的限制，為Web應用在本地存儲復雜的用戶痕跡數據提供非常方便的技術支持。那接下里分別介紹一下localStorage的常用的方法，當然基本上跟sessionStorage是一致的。
localStorage提供了四個方法來輔助我們進行對本地存儲做相關操作。
四、逆天了本地資料庫
雖然Html5已經提供了功能強大的localStorage和sessionStorage，但是他們兩個都只能提供存儲簡單數據結構的數據，對於復雜的Web應用的數據卻無能為力。逆天的是Html5提供了一個瀏覽器端的資料庫支持，允許我們直接通JS的API在瀏覽器端創建一個本地的資料庫，而且支持標準的SQL的CRUD操作，讓離線的Web應用更加方便的存儲結構化的數據。接下里介紹一下本地數據的相關API和用法。
操作本地資料庫的最基本的步驟是：
接下來分別介紹一下相關的方法的參數和用法。
（1）openDatabase方法：
openDatabase方法打開一個已經存在的資料庫，如果資料庫不存在，它還可以創建資料庫。幾個參數意義分別是：
（2）db.transaction方法可以設置一個回調函數，此函數可以接受一個參數就是我們開啟的事務的對象。然後通過此對象可以進行執行Sql腳本，跟下面的步驟可以結合起來。
（3）通過executeSql方法執行查詢。
參數說明：
E. localStorage的用法
localStorage的用法
1.在HTML5中，本地存儲是一個window的屬性，包括localStorage和sessionStorage，前者是一直存在本地的，後者是伴隨著session，窗口一旦關閉就消失了。二者用法完全相同
2.存儲數據的方法就是直接給window.localStorage添加一個屬性,localStorage裡面的數據是以鍵值對的方式存在的,可以使用getItem()和setItem()方法設置和獲取數據.
3. 向localStorage里存放多次存放相同對象名的數據時,需要先從localStorage里獲取一個屬性,如果該屬性的值為null,則創建一個數組,存在的話,就把取出來的數據用JSON.parse()方法先轉換成JSON,然後把數據存進去,存完後,再將取出來的數組,用JSON.stringify()方法將其轉換成字元串形式存入.
var student = {
name:"lily",
age:20
}
var students = localStorage.students;
if(!students){
students = [];
}else{
students = JSON.parse(students);
}
students.push(student);
localStorage.players = JSON.stringify(players);
4.HTML5本地存儲 只能存字元串 ，任何格式存儲的時候都會被自動轉為字元串，所以讀取的時候，需要自己進行類型的轉換。
5.為什麼要進行類型轉換呢,localstorage本身不就會轉換嗎?是的,但是它是用toSting()強制轉換的,轉換後的是沒有意義的字元串,或者說不是我們想要的,所以,為了數據取出來後能夠操作,我們需要使用特殊的方法進行轉換.下面是兩者的區別
var student = {
name:"haha",
age:20
};
console.log(student.toString());//[object Object]
console.log(JSON.stringify(student));//'{"name":"haha","age":20}'有效的json字元串.
6.JSON.parse()是將一個**有效的字元串**解析成json對象.
F. 如何設置html5本地存儲
web存儲最初作為HTML5的一部分被定義成API形式，但是後來被剝離出來作為獨立的標准了。
web存儲表轉所描述的API包含localStorage對象和SessionStorage對象，這兩個對象實際上是持久化關聯數組，是名值對的映射表，「名」和「值」都是字元串。
例子：
varname=localStorage.username;//查詢一個儲存的值
name=localStorage["username"];//等價於數組表示法
if(!name){
name=prompt("whatisyourname?");
localStorage.username=name;
}
//迭代所有存儲的name/value對
for(varnameinlocalStorage){
varvalue=localStorage[name];
}
G. html5,什麼是本地存儲什麼是websql資料庫存儲
HTML5 ：
將成為HTML、XHTML以及HTMLDOM的新標准。
HTML的上一個版本誕生於1999年。自從那以後，Web世界已經經歷了巨變。
HTML5仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些HTML5支持。
本地存儲：
儲存在用戶本地終端上的數據，多數使用cookie
Cookie技術誕生以來，它就成了廣大網路用戶和Web開發人員爭論的一個焦點。有一些網路用戶，甚至包括一些資深的Web專家也對它的產生和推廣感到不滿，這並不是因為Cookie技術的功能太弱或其他技術性能上的原因，而是因為Cookie的使用對網路用戶的隱私構成了危害。因為Cookie是由Web伺服器保存在用戶瀏覽器上的小文本文件，它包含有關用戶的信息[2]。
websql資料庫存儲：
使用資料庫進行數據存儲，現在流行的資料庫有：
1、Access一般用在小網站上，類似企業站，功能比較簡單，對數據要求不高；
2、Mssql是一個比較大的完善的資料庫，在windows上常用,配NETASP等程序。
3、Mysql是一個小型的公開源代碼的免費資料庫，在windows，linux上都常用，和PHP程序組成一對完美搭檔。
H. HTML5本地存儲機制是怎樣的
HTML5 是下一代 HTML 標准，開始吸引越來越多人的目光。HTML5 的 DOM Storage 機制提供了一種方式讓程序員能夠把信息存儲到本地的計算機上，在需要時獲取。這點和 cookie 相似，區別是 DOM Storage 提供了更大容量的存儲空間。
目前，在客戶端保存數據使用最多的是 cookie，但 cookie 的大小上限為 4KB，並且每次請求一個新頁面時 cookie 都會被發送過去。更多的存儲空間需要瀏覽器本身或是插件的支持，例如只在 Internet Explorer 上使用的 userData，需要額外安裝插件的 Google Gears 和 Flash。現在，HTML5 提供了一種標準的介面，使程序員可以簡單地訪問存儲的數據。由於鍵值對存儲在本地計算機上，在頁面載入完畢後可以通過 JavaScript 來操作這些數據。
HTML5 的建議是每個網站提供給 Storage 的空間是 5MB，一般來說足夠存字元串。如果存入的數據太大，有些瀏覽器如 Chrome 會拋出 QUOTA_EXCEEDED_ERR 異常。所以雖然 DOM Storage 提供的空間比 cookie 要大很多，但在使用需要注意限制。
安全性
一般不要在客戶端存儲敏感的信息，使用 localStorage、globalStorage 等在客戶端存儲的信息都非常容易暴露。應該在完成數據存儲後使用 clear 或者 removeItem 方法清除保存在 Storage 對象中的數據。
存儲事件驅動
如果想在存儲成功或修改存儲的值時執行一些操作，可以用 DOM Storage 介面提供的事件。
I. html5 本地存儲有多少種方案
摘自w3school
HTML5 提供了兩種在客戶端存儲數據的新方法：
localStorage - 沒有時間限制的數據存儲
sessionStorage - 針對一個 session 的數據存儲
之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲，因為它們由每個對伺服器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。
localStorage 方法
localStorage 方法存儲的數據沒有時間限制。第二天、第二周或下一年之後，數據依然可用。
<scripttype="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
sessionStorage 方法
sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後，數據會被刪除。
<scripttype="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
J. HTML5的5種存儲方式詳解
引言
本篇文章主要介紹了前端HTML5幾種存儲方式的總結 ，主要包括本地存儲localstorage，本地存儲sessionstorage，離線緩存（application cache），Web SQL，IndexedDB。有興趣的可以了解一下。
正文開始~
h5之前，存儲主要是用cookies。cookies缺點有在請求頭上帶著數據，大小是4k之內。主Domain污染。
主要應用：購物車、客戶登錄
對於IE瀏覽器有UserData，大小是64k,只有IE瀏覽器支持。
目標
存儲方式：
以鍵值對(Key-Value)的方式存儲，永久存儲，永不失效，除非手動刪除。
大小：
每個域名5M
支持情況：
注意：IE9 localStorage不支持本地文件，需要將項目署到伺服器，才可以支持！
常用的API：
getItem //取記錄
setIten//設置記錄
removeItem//移除記錄
key//取key所對應的值
clear//清除記錄
存儲的內容：
數組，圖片，json，樣式，腳本。。。（只要是能序列化成字元串的內容都可以存儲）
HTML5 的本地存儲 API 中的 localStorage 與 sessionStorage 在使用方法上是相同的，區別在於 sessionStorage 在關閉頁面後即被清空，而 localStorage 則會一直保存。
本地緩存應用所需的文件
使用方法：
①配置manifest文件
頁面上：
Manifest 文件：
manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。
manifest 文件可分為三個部分：
①CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存
②NETWORK - 在此標題下列出的文件需要與伺服器的連接，且不會被緩存
③FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）
完整demo：
伺服器上： manifest文件需要配置正確的MIME-type，即 "text/cache-manifest"。
如Tomcat:
常用API：
核心是applicationCache對象，有個status屬性，表示應用緩存的當前狀態：
0（UNCACHED） : 無緩存， 即沒有與頁面相關的應用緩存
1（IDLE） : 閑置，即應用緩存未得到更新
2 （CHECKING） : 檢查中，即正在下載描述文件並檢查更新
3 （DOWNLOADING） : 下載中，即應用緩存正在下載描述文件中指定的資源
4 （UPDATEREADY） : 更新完成，所有資源都已下載完畢
5 （IDLE） : 廢棄，即應用緩存的描述文件已經不存在了，因此頁面無法再訪問應用緩存
相關的事件：
表示應用緩存狀態的改變：
checking : 在瀏覽器為應用緩存查找更新時觸發
error : 在檢查更新或下載資源期間發送錯誤時觸發
noupdate : 在檢查描述文件發現文件無變化時觸發
downloading : 在開始下載應用緩存資源時觸發
progress：在文件下載應用緩存的過程中持續不斷地下載地觸發
updateready : 在頁面新的應用緩存下載完畢觸發
cached : 在應用緩存完整可用時觸發
Application Cache的三個優勢：
① 離線瀏覽
② 提升頁面載入速度
③ 降低伺服器壓力
注意事項：
1. 瀏覽器對緩存數據的容量限制可能不太一樣（某些瀏覽器設置的限制是每個站點 5MB）
2. 如果manifest文件，或者內部列舉的某一個文件不能正常下載，整個更新過程將視為失敗，瀏覽器繼續全部使用老的緩存
3. 引用manifest的html必須與manifest文件同源，在同一個域下
4. 瀏覽器會自動緩存引用manifest文件的HTML文件，這就導致如果改了HTML內容，也需要更新版本才能做到更新。
6. FALLBACK中的資源必須和manifest文件同源
7. 更新完版本後，必須刷新一次才會啟動新版本（會出現重刷一次頁面的情況），需要添加監聽版本事件。
8. 站點中的其他頁面即使沒有設置manifest屬性，請求的資源如果在緩存中也從緩存中訪問
9. 當manifest文件發生改變時，資源請求本身也會觸發更新
離線緩存與傳統瀏覽器緩存區別：
1. 離線緩存是針對整個應用，瀏覽器緩存是單個文件
2. 離線緩存斷網了還是可以打開頁面，瀏覽器緩存不行
3. 離線緩存可以主動通知瀏覽器更新資源
關系資料庫，通過SQL語句訪問
Web SQL 資料庫 API 並不是 HTML5 規范的一部分，但是它是一個獨立的規范，引入了一組使用 SQL 操作客戶端資料庫的 APIs。
支持情況：
Web SQL 資料庫可以在最新版的 Safari, Chrome 和 Opera 瀏覽器中工作。
核心方法：
①openDatabase： 這個方法使用現有的資料庫或者新建的資料庫創建一個資料庫對象。
②transaction： 這個方法讓我們能夠控制一個事務，以及基於這種情況執行提交或者回滾。
③executeSql： 這個方法用於執行實際的 SQL 查詢。
打開資料庫：
執行查詢操作：
插入數據：
讀取數據：
由這些操作可以看出，基本上都是用SQL語句進行資料庫的相關操作，如果你會MySQL的話，這個應該比較容易用。
索引資料庫 (IndexedDB) API（作為 HTML5 的一部分）對創建具有豐富本地存儲數據的數據密集型的離線 HTML5 Web 應用程序很有用。同時它還有助於本地緩存數據，使傳統在線 Web 應用程序（比如移動 Web 應用程序）能夠更快地運行和響應。
非同步API：
在IndexedDB大部分操作並不是我們常用的調用方法，返回結果的模式，而是請求——響應的模式，比如打開資料庫的操作
這樣，我們打開資料庫的時候，實質上返回了一個DB對象，而這個對象就在result中。由上圖可以看出，除了result之外。還有幾個重要的屬性就是onerror、onsuccess、onupgradeneeded（我們請求打開的資料庫的版本號和已經存在的資料庫版本號不一致的時候調用）。這就類似於我們的ajax請求那樣。我們發起了這個請求之後並不能確定它什麼時候才請求成功，所以需要在回調中處理一些邏輯。
關閉與刪除：
數據存儲：
indexedDB中沒有表的概念，而是objectStore，一個資料庫中可以包含多個objectStore，objectStore是一個靈活的數據結構，可以存放多種類型數據。也就是說一個objectStore相當於一張表，裡面存儲的每條數據和一個鍵相關聯。
我們可以使用每條記錄中的某個指定欄位作為鍵值（keyPath），也可以使用自動生成的遞增數字作為鍵值（keyGenerator），也可以不指定。選擇鍵的類型不同，objectStore可以存儲的數據結構也有差異。
學習從來不是一個人的事情，要有個相互監督的夥伴，想要學習或交流前端問題的小夥伴可以私信「學習」小明獲取web前端入門資料，一起學習，一起成長！