4.HTML5新特性：拖拽API与本地数据库

本文主要是介绍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数据清除失败");
};

这篇关于4.HTML5新特性：拖拽API与本地数据库的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！