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

爆头女枪手

``当地文件

介绍：经由过程利用正在 HTML5 中参加到 DOM 的 File API，使正在web内乱容中让用户挑选当地文件然后读与那些文件的内乱容。
观点：FileReader接心次要是用去把文件读进内乱存,并且读与文件中的数据,fileReader接心供给同步API

正在进修FileReader接心之前我们先去了解下怎样经由过程元素获得单个/多个文件

单个文件

<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>

复造代码

多个单个文件

<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工具供给了三个有效属性：

name 文件称号，只读字符串。只包罗文件名，没有包罗任何途径疑息。

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)：将文件读与为文本，该办法承受两个参数：
- 参数一：需求读与的文本文件工具
- 参数两：文本文件的编码格局，默许值为"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('不管胜利失利本次读与操纵终了')
}

复造代码

「课堂锻炼」

  完成图片上传显现图片功用


  请求：


上传图片必需是image范例不然，本次上传分歧法

将图片读与为DataURL，并以img的情势将图片隐式正在页里上

console挨印当前文件读与的进度即曾经读与百分之几

拖拽API

介绍：正在HTML5之间完成拖放（drag and drop）只能依托jQuery如许的js库才气完成，而HTML5增加了对拖放的撑持，将拖放内乱置到阅读器中包管了拖放能够跨阅读器事情。

一个典范的拖拽操纵是如许的：用户可以使用鼠标挑选可拖拽（draggable）元素，将元素拖拽到可安排（droppable）元素，并开释鼠标按钮以安排那些元素。拖拽操纵时期，会有一个可拖拽元素的半通明快照跟从着鼠标指针。

观点：HTML 的 drag & drop 利用了 DOM event model 和从 mouse events 持续而去的 drag events 。正在操纵时期，会触收一些变乱范例，有一些变乱范例大要会被屡次触收,局部的 拖拽变乱范例 有一个对应的 拖拽齐局属性，其内乱容以下：
变乱发生变乱的元素触收时辰dragstart可拖拽元素自己当用户开端拖拽一个元素或选中的文本时触收drag被拖放的元素当拖拽元素或选中的文本时触收。dragenter拖放的目标元素（被拖拽项目大要安排的处所）当拖拽元素或选中的文本到一个可开释目标时触收dragover拖放的目标元素（被拖拽项目大要安排的处所）当元素或选中的文本被拖到一个可开释目标上时触收（每100毫秒触收一次）。drop拖放的目标元素当元素或选中的文本正在可开释目标上被开释时触收dragend可拖拽元素自己当拖拽操纵结束时触收（不管拖拽是胜利仍是被打消）留意：正在HTML5中要完成拖放操纵,最少要颠末以下两个步调

将念要拖放的工具元素的draggable属性设置为true,留意img元素战a元素(必需指定href)默许许可拖放
编写取拖放有闭的变乱处理代码,如界说拖拽数据、界说拖拽成果、界说安排地区、处理安排成果、处理拖拽结束

案例：

将元素设置为可拖拽的

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

复造代码

界说拖拽数据

使用法式能够正在拖拽操纵中包罗随便数量的数据项。每一个数据项皆是一个 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);
})

复造代码

界说拖拽图象（可选）

拖拽过程当中，阅读器会正在鼠标旁显现一张默许图片。固然，使用法式也能够经由过程setDragImage() 办法自界说一张图片
setDragImage(img, xOffset, yOffset)
参数一：是一个图象的援用（不只能够是图片）
参数第2、三：是图象地位相对鼠标指针地位的偏偏移量

// 拖动开端
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);
})

复造代码

界说拖拽成果(可选)

  dropEffect 属性用去掌握拖放操纵顶用户赐与的反应。它会影响到拖拽过程当中阅读器显现的鼠标款式。好比，当用户悬停正在目标元素上的工夫，阅读器鼠标或许要反应拖放操纵的范例。
有三个成果能够界说


copy 表白被拖拽的数据将从它本来的地位拷贝到目标的地位。

move 表白被拖拽的数据将被挪动。

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);
})

复造代码

界说安排地区

当拖拽一个项目到 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() 去阻遏对那个变乱的别的处理历程（如触面变乱或指针变乱）。

处理安排成果、处理拖拽结束

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; // 一切被拖拽的元素皆正在改属性中
}

复造代码

「课堂锻炼」

  完成拖拽图片上传显现图片功用（撑持多文件拖拽）


  请求：


正在页里创立一个拖拽目标地区，撑持内部文件拖拽到当前地区

撑持拖拽多个文件，但只要上传文件必需是image范例才会展现正在页里上

阅读器数据库 indexedDB

介绍： indexedDB 是一种底层 API，用于正在客户端存储大批的构造化数据（也包含文件/两进造年夜型工具（blobs））。该 API 利用索引完成对数据的下机能搜刮。当然 Web Storage 正在存储较大批的数据很有效，但关于存储更大批的构造化数据来讲力有未逮。而 IndexedDB 供给了这类场景的处理计划。

IndexedDB 是一个事件型数据库体系，相似于基于 SQL 的 RDBMS。但是，没有像 RDBMS 利用牢固列表，IndexedDB 是一个基于 JavaScript 的里背工具数据库。IndexedDB 许可您存储战检索用键索引的工具；能够存储构造化克隆算法撑持的任何工具。您只需求指定命据库形式，翻开取数据库的毗邻，然后检索战更新一系列事件。

观点：

数据库（IndexedDB）: 数据库是一系列相干数据的容器。每一个域名（严厉的道，是和谈 + 域名 + 端心）皆能够新建随便多个数据库。

IndexedDB 数据库有版本的观点。统一个时辰，只能有一个版本的数据库存正在。假设要修正数据库构造（新删或删除表、索引大概主键），只能经由过程晋级数据库版本完成。

工具仓库（object store）: 每一个数据库包罗多少个工具仓库。它相似于干系型数据库的表格。
数据纪录：工具仓库保留的是数据纪录。每笔记载相似于干系型数据库的止，可是只要主键战数据体两部门。主键用去创立默许的索引，必需是差别的，不然会报错。主键能够是数据纪录里面的一个属性，也能够指定为一个递删的整数编号。

//该工具中，id属性能够看成主键。数据体能够是随便数据范例，没有限于工具。
{ id: 1 , text: 'foo' }

复造代码

索引：为了加快数据的检索，能够正在工具仓库里面，为差别的属性创立索引。
事件：数据纪录的读写战删改，皆要经由过程事件完成。事件工具供给error、abort战complete三个变乱，用去监听操纵成果。

相干API

留意：利用 IndexedDB 施行的操纵是同步施行的，免得壅闭使用法式。

indexedDB.open(databaseName, version)

介绍：办法用于翻开一个数据库毗邻。本办法立刻返回一个 IDBOpenDBRequest 工具，但翻开数据库的操纵是同步施行的。
1. 参数一 String 表示数据库的名字。假设指定的数据库没有存正在，便会新建数据库。
2. 参数两整数Number，表示数据库的版本。假设省略，翻开已无数据库时，默觉得当前版本；新建数据库时，默觉得1。

毗邻数据库正在一个零丁的线程中停止，包含以下几个步调：

指定命据库曾经存正在时：

等候 versionchange 操纵完成。

假设数据库已方案删除，那等着删除完成。

假设已无数据库版本下于给定的 version，中断动身error变乱，操纵并返回范例为 VersionError 的 DOMError 。

假设已无数据库版本低于给定的 version，触收一个 versionchange 操纵。

假设数据库没有存正在，创立指命名称的数据库，将版本号设置为给定版本，假设已给定版本号，则设置为1。

创立数据库毗邻。

假设操纵胜利施行，将触收 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数据肃清失利");
};

复造代码

免责声明：假如进犯了您的权益，请联络站少，我们会实时删除侵权内乱容，感谢协作！