4.HTML5新特性：拖拽API與本地資料庫

``本地檔案

介紹：通過使用在 HTML5 中加入到 DOM 的 File API，使在web內容中讓用戶選擇本地檔案然后讀取這些檔案的內容，

概念：FileReader介面 主要是用來把檔案讀入記憶體,并且讀取檔案中的資料,fileReader介面提供異步API

• 在學習FileReader介面之前我們先來了解下如何通過<input>元素獲取單個/多個檔案

1. 單個檔案

<input type="file" id="input">

<script>
// 獲取input元素的DOM節點
const inputElement = document.getElementById("input");
// 系結change監聽事件，當用戶選擇檔案時觸發
inputElement.addEventListener("change", handleFiles, false);

function handleFiles() {
  // 因為input表單默認只能選擇了一個檔案，那么只需要獲取串列中的第一個檔案
  const selectedFile = this.files[0]; 
}
</script>

2. 多個單個檔案

<!-- 如果你想讓用戶選擇多個檔案，只需在 input 元素上使用 multiple 屬性： -->
<input type="file" id="input" multiple >

<script>
// 獲取input元素的DOM節點
const inputElement = document.getElementById("input");
// 系結change監聽事件，當用戶選擇檔案時觸發
inputElement.addEventListener("change", handleFiles, false);

function handleFiles() {
  // 因為是多選通過表單元素的files就可以獲取選中的所有檔案串列
  const fileList = this.files; 
}
</script>

表單元素的files是一個偽陣列包含所有的File物件，File物件提供了三個有用屬性：

1. name 檔案名稱，只讀字串，只包含檔案名，不包含任何路徑資訊，
2. size 以位元組數為單位的檔案大小，只讀的64位整數，
   3. type 檔案的 MIME 型別，只讀字串，當型別不能確定時為 “”，

注意：因為本地檔案是HTML5新增特性部分瀏覽器可能不支持,所以使用前需要做一定判斷

 if(typeof FileReader == 'undefined'){
            alert('你的瀏覽器未實作 FileReader介面')
        }

介面方法

• readAsBinaryString(file)： 將檔案讀取為二進制碼,通常用來傳后端，

var files = document.getElementById('file').files[0];
var reader = new FileReader() //創建一個檔案讀取器;
//將檔案以二進制形式讀入
reader.readAsBinaryString(files) //把讀取的檔案二進制資料轉化為base64資料.;

• readAsText(file,charset)： 將檔案讀取為文本，該方法接受兩個引數：
  1. 引數一：需要讀取的文本檔案物件
  2. 引數二：文本檔案的編碼格式，默認值為"utf-8"

var files = document.getElementById('file').files[0];
var reader = new FileReader();
reader.readAsText(files,'utf-8')//讀取檔案文本內容. 讀取txt檔案.;

• readAsDataURL(file)：將檔案讀取為DataURL，該方法實際上是將小檔案以一種特殊格式的url形式直接讀入頁面

  function readAsDataURLTest(){
        var files = document.getElementById('file').files[0];
        console.log(files);
        //判斷是否為圖片檔案
        if(!/image\/\w+/.test(files.type)){
            alert('選擇圖片型別檔案');
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(files);
        reader.onerror = function(){
            alert('讀取失敗請重新上傳');
        };
        reader.onload = function(e){
            var result = document.getElementById('result');
            result.innerHTML = '<img src="'+this.result+'">'
        }
    }

• abort() 該方法用來終端讀取操作，

var files = document.getElementById('file').files[0];

var reader = new FileReader();

reader.readAsText(files,'utf-8');

// 讀取被終端了
reader.abort()

事件
介紹：FileReader除了提供了上述API方法以外還包含了一套完整的事件模型，用于捕獲讀取檔案時的狀態，

• onabort 資料讀取中斷時觸發
• onerror 資料讀取出錯時觸發
• onloadstart 資料讀取開始時觸發
• onprogress 資料讀取中
• onload 資料讀取完成，在該事件中FileReader物件的result屬性將會回傳讀取到的檔案
• onloadend 資料讀取完成時觸發,無論成功與失敗

var file = document.getElementById('file').files[0];

var reader = new FileReader();

reader.readAsText(file,'utf-8');

reader.onabort = function(){
    console.log('檔案讀取操作被終止')
}

reader.onerror = function(){
    alert('讀取失敗請重新上傳');
};

reader.onloadstart = function () {
    console.log('檔案開始讀取')
}

reader.onprogress = function() {
    // e.loaded   fileReader 已經讀取了多少位元組
    console.log('檔案正在讀取中...', e.loaded , file.size)
}

reader.onload = function(e){
    var result = this.result
    console.log('讀取成功', result) 
}


reader.onloadend = function(e){
    console.log('無論成功失敗本次讀取操作完畢') 
}

「課堂練習」

實作圖片上傳顯示圖片功能

要求：

1. 上傳圖片必須是image型別否則，本次上傳不合法
2. 將圖片讀取為DataURL，并以img的形式將圖片顯式在頁面上
3. console列印當前檔案讀取的進度即已經讀取百分之幾

拖拽API

介紹：在HTML5之間實作拖放（drag and drop）只能依靠jQuery這樣的js庫才能實作，而HTML5添加了對拖放的支持，將拖放內置到瀏覽器中保證了拖放可以跨瀏覽器作業，

一個典型的拖拽操作是這樣的：用戶可使用滑鼠選擇可拖拽（draggable）元素，將元素拖拽到可放置（droppable）元素，并釋放滑鼠按鈕以放置這些元素，拖拽操作期間，會有一個可拖拽元素的半透明快照跟隨著滑鼠指標，

概念：HTML 的 drag & drop 使用了 DOM event model 以及從 mouse events 繼承而來的 drag events ，在操作期間，會觸發一些事件型別，有一些事件型別可能會被多次觸發,所有的 拖拽事件型別 有一個對應的 拖拽全域屬性，其內容如下：

注意：在HTML5中 要實作拖放操作,至少要經過如下兩個步驟

1. 將想要拖放的物件元素的draggable屬性設定為true,注意img元素和a元素(必須指定href)默認允許拖放
2. 撰寫與拖放有關的事件處理代碼,如定義拖拽資料、定義拖拽效果、定義放置區域、處理放置效果、處理拖拽結束

案例：

1. 將元素設定為可拖拽的

<div id="dragme" draggable="true" style="width: 200px;border: 1px solid red ">請拖動我</div>

2. 定義拖拽資料

應用程式可以在拖拽操作中包含任意數量的資料項，每個資料項都是一個 string 型別，典型的 MIME 型別，如：text/html，

var dragme = document.getElementById('dragme');

// 拖動開始
dragme.addEventListener('dragstart',function(evt){
// 每個 drag event 都有一個dataTransfer 屬性，其中保存著事件的資料，
// DataTransfer 物件包含了拖拽事件的狀態，例如拖拽事件的型別（如拷貝 copy 或者移動 move），拖拽的資料（一個或者多個項）和每個拖拽項的型別（MIME型別），  
// setData() 方法為拖拽資料添加一個項
evt.dataTransfer.setData("text/plain", evt.target.innerText);
evt.dataTransfer.setData("text/html", evt.target.outerHTML);
evt.dataTransfer.setData("application/my-app", evt.target.id);
evt.dataTransfer.setData("text/uri-list", evt.target.ownerDocument.location.href);
})

3. 定義拖拽影像（可選）

拖拽程序中，瀏覽器會在滑鼠旁顯示一張默認圖片，當然，應用程式也可以通過setDragImage() 方法自定義一張圖片
setDragImage(img, xOffset, yOffset)
引數一：是一個影像的參考（不僅可以是圖片）
引數第二、三：是影像位置相對于滑鼠指標位置的偏移量

// 拖動開始
dragme.addEventListener('dragstart',function(evt){
// 使用js創建一個image物件 
var img = new Image(); 
// 給img物件指定圖片地址
img.src = 'example.gif';
// 設定拖拽圖影像
ev.dataTransfer.setDragImage(img, 10, 10);

evt.dataTransfer.setData("text/plain", evt.target.innerText);
evt.dataTransfer.setData("text/html", evt.target.outerHTML);
evt.dataTransfer.setData("application/my-app", evt.target.id);
evt.dataTransfer.setData("text/uri-list", evt.target.ownerDocument.location.href);
})

4. 定義拖拽效果(可選)

dropEffect 屬性用來控制拖放操作中用戶給予的反饋，它會影響到拖拽程序中瀏覽器顯示的滑鼠樣式，比如，當用戶懸停在目標元素上的時候，瀏覽器滑鼠也許要反映拖放操作的型別，
有三個效果可以定義

1. copy 表明被拖拽的資料將從它原本的位置拷貝到目標的位置，
2. move 表明被拖拽的資料將被移動，
3. link 表明在拖拽源位置和目標位置之間將會創建一些關系表格或是連接，

effectAllowed 屬性以指定允許拖拽源頭執行三種操作中的哪幾種，
none 不允許操作
copy 只復制
move 只移動
link 只鏈接
copyMove 復制或移動
copyLink 復制或鏈接
linkMove 鏈接或移動
all 復制、移動或鏈接（默認值）

// 拖動開始
dragme.addEventListener('dragstart',function(evt){
// 允許元素進行哪些操作，一般情況下你不需要調整這個屬性，除非你想要排除某個特定操作，
evt.dataTransfer.effectAllowed = "copy";
// 定義拖拽效果
evt.dataTransfer.dropEffect = "copy";

evt.dataTransfer.setData("text/plain", evt.target.innerText);
evt.dataTransfer.setData("text/html", evt.target.outerHTML);
evt.dataTransfer.setData("application/my-app", evt.target.id);
evt.dataTransfer.setData("text/uri-list", evt.target.ownerDocument.location.href);
})

5. 定義放置區域

當拖拽一個專案到 HTML 元素中時，瀏覽器默認不會有任何回應，想要讓一個元素變成可釋放區域，該元素必須設定 ondragover 和 ondrop 事件處理程式屬性

 <div id="target">放置區域</div>

<script>
var target = document.getElementById('target')

target.addEventListener('dragover',function(evt) {
    evt.preventDefault()
})

target.addEventListener('drop',function(evt) {
    evt.preventDefault()
})

</script>

注意：注意每個處理程式呼叫 preventDefault() 來阻止對這個事件的其它處理程序（如觸點事件或指標事件），

6. 處理放置效果、處理拖拽結束

drop 事件的處理程式是以程式指定的方法處理拖拽資料，一般，程式呼叫 getData() 方法取出拖拽專案并按一定方式處理，

<p id="target">放置區域</p>

<script>
var target = document.getElementById('target')

target.addEventListener('dragover',function(evt) {
    evt.preventDefault()
})

target.addEventListener('drop',function(evt) {
    evt.preventDefault()

     // getData() 方法獲取指定拖拽資料項的值
     var data = evt.dataTransfer.getData("text/plain");
     var html = evt.dataTransfer.getData("text/html");
     var id = evt.dataTransfer.getData("application/my-app");
     var href = evt.dataTransfer.getData("text/uri-list");
     console.log(data, html, href)

     // 將拖拽元素移動到目標元素內部
     evt.target.appendChild(document.getElementById(id));
})

</script>

注意：拖拽支持外部檔案拖拽，在drop事件中可通過evt.dataTransfer.files獲取檔案物件串列，

function drop(e) {
        e.stopPropagation();
        e.preventDefault();

        var dt = e.dataTransfer;
        var files = dt.files;  // 所有被拖拽的元素都在改屬性中

}

「課堂練習」

實作拖拽圖片上傳顯示圖片功能（支持多檔案拖拽）

要求：

1. 在頁面創建一個拖拽目標區域，支持外部檔案拖拽到當前區域
2. 支持拖拽多個檔案，但只有上傳檔案必須是image型別才會展示在頁面上

瀏覽器資料庫 indexedDB

介紹： indexedDB 是一種底層 API，用于在客戶端存盤大量的結構化資料（也包括檔案/二進制大型物件（blobs）），該 API 使用索引實作對資料的高性能搜索，雖然 Web Storage 在存盤較少量的資料很有用，但對于存盤更大量的結構化資料來說力不從心，而 IndexedDB 提供了這種場景的解決方案，

IndexedDB 是一個事務型資料庫系統，類似于基于 SQL 的 RDBMS， 然而，不像 RDBMS 使用固定串列，IndexedDB 是一個基于 JavaScript 的面向物件資料庫，IndexedDB 允許記憶體儲和檢索用鍵索引的物件；可以存盤結構化克隆演算法支持的任何物件，您只需要指定資料庫模式，打開與資料庫的連接，然后檢索和更新一系列事務，

概念：

1. 資料庫（IndexedDB）: 資料庫是一系列相關資料的容器，每個域名（嚴格的說，是協議 + 域名 + 埠）都可以新建任意多個資料庫，

IndexedDB 資料庫有版本的概念，同一個時刻，只能有一個版本的資料庫存在，如果要修改資料庫結構（新增或洗掉表、索引或者主鍵），只能通過升級資料庫版本完成，

2. 物件倉庫（object store）: 每個資料庫包含若干個物件倉庫，它類似于關系型資料庫的表格，

3. 資料記錄：物件倉庫保存的是資料記錄，每條記錄類似于關系型資料庫的行，但是只有主鍵和資料體兩部分，主鍵用來建立默認的索引，必須是不同的，否則會報錯，主鍵可以是資料記錄里面的一個屬性，也可以指定為一個遞增的整數編號，

//該物件中，id屬性可以當作主鍵，資料體可以是任意資料型別，不限于物件，
{ id: 1 , text: 'foo' }

4. 索引：為了加速資料的檢索，可以在物件倉庫里面，為不同的屬性建立索引，

5. 事務：資料記錄的讀寫和刪改，都要通過事務完成，事務物件提供error、abort和complete三個事件，用來監聽操作結果，

相關API

注意：使用 IndexedDB 執行的操作是異步執行的，以免阻塞應用程式，

indexedDB.open(databaseName, version)

介紹：方法用于打開一個資料庫連接，本方法立即回傳一個 IDBOpenDBRequest 物件，但打開資料庫的操作是異步執行的，
1. 引數一 String 表示資料庫的名字，如果指定的資料庫不存在，就會新建資料庫，
2. 引數二 整數Number，表示資料庫的版本，如果省略，打開已有資料庫時，默認為當前版本；新建資料庫時，默認為1，

連接資料庫在一個單獨的執行緒中進行，包括以下幾個步驟：

1. 指定資料庫已經存在時：
   • 等待 versionchange 操作完成，
   • 如果資料庫已計劃洗掉，那等著洗掉完成，
2. 如果已有資料庫版本高于給定的 version，中止出發error事件，操作并回傳型別為 VersionError 的 DOMError ，
3. 如果已有資料庫版本低于給定的 version，觸發一個 versionchange 操作，
4. 如果資料庫不存在，創建指定名稱的資料庫，將版本號設定為給定版本，如果未給定版本號，則設定為1，
5. 創建資料庫連接，
6. 如果操作成功執行，將觸發 success 事件

var DBOpenRequest = window.indexedDB.open("toDoList", 1)
DBOpenRequest.onsuccess = function (e) {
    console.log('success')
    // 將打開資料庫的結果回傳當前資料庫IDBDatabase物件，可用于在今后操作資料庫，
    // IDBDatabase物件表示一個資料庫連接，這是在資料庫中獲取事務的唯一方式，
    console.log(DBOpenRequest.result)
}

DBOpenRequest.onerror = function (event) {
    console.log('資料庫打開報錯');
}

DBOpenRequest.onupgradeneeded = function (event) {
    console.log('指定的版本號，大于當前資料庫版本號')
}

注意： 因為onupgradeneeded方法會在資料庫創建時被出發，所以一般情況下我們會將新建資料庫操作在onupgradeneeded回呼函式中實作，

indexedDB.deleteDatabase(databaseName)

介紹： 方法用請求洗掉資料庫，本方法立即回傳一個 DBDeleteRequest 物件，
1. 引數一 String 表示需要洗掉資料庫的名字，如果指定的資料庫不存在不會報錯，

var DBDeleteRequest = window.indexedDB.deleteDatabase("toDoList");

DBDeleteRequest.onerror = function(event) {
  console.log("Error deleting database.");
};
 
DBDeleteRequest.onsuccess = function(event) {
  console.log("Database deleted successfully");
    
  console.log(event.result); // should be undefined
};

IDBDatabase.createObjectStore(storeName, optional)

介紹：方法創建并回傳一個新的 object store，
1. 引數一 String 被創建的 object store 的名稱，請注意創建空名稱的 object store 是被允許的，
2. 引數二 Object 可選的物件，它可以定義重要的可選屬性，一般只設定{keyPath: '當前object store的主鍵'}

DBOpenRequest.onupgradeneeded = function (event) {
    var db = DBOpenRequest.result
    var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
}

• db.objectStoreNames.contains(‘person’)

IDBDatabase.deleteObjectStore(storeName)

介紹：方法從 IDBDatabase 中銷毀指定名稱的物件存盤，及這個物件存盤所包含的任何索引，
1. 引數一 String 將要洗掉的 object store 的名稱，

var request = indexedDB.open(dbName, dbVersion);

request.onupgradeneeded = function(e) {
  var db = request.result;
 
    db.createObjectStore("store1");

    db.deleteObjectStore("store1");
    db.createObjectStore("store2");
  
  // etc. for version < 3, 4...
};

IDBObjectStore.createIndex(name, keyPath, optional)

介紹：創建并回傳新的IDBIndex物件，該方法只能從versionchange事務模式的回呼方法中被呼叫，
1. 引數一 String 索引名稱，
2. 引數二 String 索引所在的屬性，
3. 引數三 Object 配置物件， 一般只設定{unique: Boolean} 說明該屬性是否包含重復的值值為true是不允許有重復值

request.onupgradeneeded = function(event) {
  db = event.target.result;
  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
  objectStore.createIndex("notified", "notified", { unique: false });
}

IDBTransacation

介紹：該物件介面由IndexedDB API提供，異步事務使用資料庫中的事件物件屬性，所有的讀取和寫入資料均在事務中完成，由IDBDatabase發起事務，通過IDBTransaction 來設定事務的模式（例如：是否只讀readonly或讀寫readwrite），以及通過IDBObjectStore來發起一個請求，
1. 引數一 可以是’storeName’ 也可以是 Array 陣列中包含 object store 名 [‘storeName’] 表示當前事務處理的表
2. 引數二 可選值 ‘readonly’ 只讀 或者 'readwrite’讀寫

通過IDBTransaction.objectStore(storeName)方法，拿到 IDBObjectStore 物件，就可以向物件倉庫進行讀寫操作了

var transaction = db.transaction(['toDoList'], 'readwrite')

transaction.onabort = function (e) {
  // 事務被中止時觸發，這可能是由于：
  
  // 錯誤的請求，例如嘗試向 add() 添加同一個鍵兩次
  
  // 來自腳本的顯式abort()呼叫
  
  // 請求的成功/錯誤處理程式中出現未捕獲的例外，
  
  // I/O錯誤（實際寫入磁盤失敗，例如磁盤分離或其他作業系統/硬體故障），或
  
  // 超過配額，
}
transaction.oncomplete = function(e) {
  // 在事務成功完成時觸發，
}

transaction.onerror = function(e) {
  // 在事務成失敗時觸發，
}

// 獲取當前事務處理的 objectStore
var objectStore = transaction.objectStore('person')

objectStore.add(value，key)

介紹：回傳一個IDBRequest物件，并且在新執行緒中克隆一個值，該值存盤在表中，
1. value 被存盤的值
2. key 標識某條記錄的鍵，如果不指定，它會被設為null，

 var transaction = db.transaction(["toDoList"], "readwrite");
 var objectStore = transaction.objectStore('toDoList')
 var objectStoreRequest = objectStore.add( { taskTitle: 'title1', hours: 12 , minutes: 36, day: 1, month: 5, year: 2020, notified: "no" })

objectStoreRequest.onsuccess = function(event) {
    cosonle.log('資料添加成功')    
};

objectStoreRequest.onerror = function(event) {
  console.log("資料添加失敗");
};

objectStore.delete(key)

介紹：創建并立即回傳一個 IDBRequest 物件，并且在一個單獨的執行緒中清除這個物件存盤.洗掉由給定鍵或鍵范圍指定的記錄以及參考該物件的任何索引，

var transaction = db.transaction(["toDoList"], "readwrite");
var objectStore = transaction.objectStore('toDoList')
var objectStoreRequest = objectStore.delete ('title1')

objectStoreRequest.onsuccess = function(event) {
    cosonle.log('資料洗掉成功')  
    var request = objectStore.delete('title1')  
};

objectStoreRequest.onerror = function(event) {
  console.log("資料洗掉失敗");
};

objectStore.get (key)

介紹：讀取資料,立即回傳IDBRequest物件，并在單獨的執行緒中從物件存盤中檢索請求的記錄，如果操作成功，則對回傳的物件觸發成功事件，其結果設定為檢索到的值，

var transaction = db.transaction(["toDoList"], "readonly");
var objectStore = transaction.objectStore('toDoList')

var request = objectStore.get('title1');

request.onerror = function(event) {

     console.log('事務失敗');

};

request.onsuccess = function( event) {
  
    console.log('獲得的資料：', request.result);

};

objectStore.put (value)

介紹：更新資料，回傳一個IDBRequest物件，并在單獨的執行緒中創建該值的結構化克隆，并將克隆的值存盤在物件存盤區中，如果成功存盤了記錄，則在回傳的請求物件上觸發一個成功事件，

var transaction = db.transaction(["toDoList"], "readwrite");
var objectStore = transaction.objectStore('toDoList')
var objectStoreRequest = objectStore.put({ taskTitle: 'title1', hours: 14, minutes: 25, day: 2, month: 5, year: 2019, notified: "no" })

objectStoreRequest.onsuccess = function(event) {
    cosonle.log('資料更新成功')    
};

objectStoreRequest.onerror = function(event) {
  console.log("資料更新失敗");
};

objectStore.openCursor() / objectStore.getAll()

介紹：立即回傳一個IDBRequest物件，位于一個單獨的執行緒中，如果有一條及以上條記錄與鍵范圍匹配，那么將觸發一個成功事件，并將記錄作為結果回傳，如果沒有與鍵范圍匹配的記錄，則對回傳的物件觸發一個成功事件，其結果設定為null，

注意：getAll() 是在this.result一次性獲取所有的值，而openCursor()需要使用this.result.continue()遍歷下一條值

var transaction = db.transaction("toDoList");
var objectStore = transaction.objectStore('toDoList')

objectStore.openCursor().onsuccess = function (event) {
     var cursor = event.target.result;

     if (cursor) {
      console.log('所有匹配資料', cursor)
      cursor.continue(); // 遍歷下一條資料
    } else {
      console.log('沒有更多資料了！');
    }
};


var request = objectStore.getAll()
// 無序遍歷獲取物件倉庫中所有的值
request.onsuccess = function () {
      console.log(this.result)
}

objectStore.index (in DOMString name)

介紹：使用索引,通過該方可以打開物件存盤中的命名索引，可以不使用主鍵搜索任意欄位，

DBOpenRequest.onupgradeneeded = function (event) {
    var db = DBOpenRequest.result
    // 默認情況下我們通過 taskTitle 的 value 值作為索引
    var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
    // 下面這些建立的索引都可以使用 index() 方法打開命名索引
    objectStore.createIndex("hours", "hours", { unique: false });
    objectStore.createIndex("minutes", "minutes", { unique: false });
    objectStore.createIndex("day", "day", { unique: false });
    objectStore.createIndex("month", "month", { unique: false });
    objectStore.createIndex("year", "year", { unique: false });
    objectStore.createIndex("notified", "notified", { unique: false });
}

var transaction = db.transaction(['toDoList'], 'readonly');
var store = transaction.objectStore('toDoList');
var index = store.index('month'); // 打開 month 命名索引
var request = index.get('2020');  // 通過 month 命名索引獲取

request.onsuccess = function (e) {
  var result = e.target.result;
  if (result) {
    // ...
  } else {
    // ...
  }
}


 
var transaction = db.transaction('toDoList', 'readonly')

var objectStore = transaction.objectStore('toDoList')
// 指定使用什么索引屬性查詢資料
var index = objectStore.index('name')
/*
// 指定獲取第一個name = 小剛的值
var request = index.get('小剛')
request.onsuccess = function () {
  var result = this.result
                
   console.log(result)
}
*/

// 獲取多個 name = 小剛的值
var request = index.openCursor('小剛')

request.onsuccess = function () {
  var result = this.result

  if(result) {
    console.log(result.value, this)
    result.continue()
  }
                
}

// 獲取所有 name = 小剛 的值
var request = index.getAll('小剛')

request.onsuccess = function () {
  console.log('success', this.result)
}

objectStore.clear()

介紹：創建并立即回傳一個 IDBRequest 物件, 并且在一個單獨的執行緒中清除這個物件存盤. 清除物件存盤包括從物件存盤中洗掉所有的記錄，并洗掉物件存盤參考的索引中的所有記錄，

 var transaction = db.transaction(["toDoList"], "readwrite");
 var objectStore = transaction.objectStore('toDoList')
 var objectStoreRequest = objectStore.clear()

objectStoreRequest.onsuccess = function(event) {
    cosonle.log("objectStore資料清除成功")    
};

objectStoreRequest.onerror = function(event) {
  console.log("objectStore資料清除失敗");
};

}

}

// 獲取所有 name = 小剛 的值
var request = index.getAll(‘小剛’)

request.onsuccess = function () {
console.log(‘success’, this.result)
}

### objectStore.clear()
**介紹**：創建并立即回傳一個 IDBRequest 物件, 并且在一個單獨的執行緒中清除這個物件存盤. 清除物件存盤包括從物件存盤中洗掉所有的記錄，并洗掉物件存盤參考的索引中的所有記錄，
```javascript
 var transaction = db.transaction(["toDoList"], "readwrite");
 var objectStore = transaction.objectStore('toDoList')
 var objectStoreRequest = objectStore.clear()

objectStoreRequest.onsuccess = function(event) {
    cosonle.log("objectStore資料清除成功")    
};

objectStoreRequest.onerror = function(event) {
  console.log("objectStore資料清除失敗");
};