首页 > 数据库> 文章详细

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

2021-09-05 23:01:11 阅读：205 来源： 互联网

标签：function transaction objectStore API HTML5 var evt 拖拽

``本地文件

介绍：通过使用在 HTML5 中加入到 DOM 的 File API，使在web内容中让用户选择本地文件然后读取这些文件的内容。

概念：FileReader接口主要是用来把文件读入内存,并且读取文件中的数据,fileReader接口提供异步API

在学习FileReader接口之前我们先来了解下如何通过<input>元素获取单个/多个文件

单个文件

<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 元素上使用 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对象提供了三个有用属性：

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)：将文件读取为文本，该方法接受两个参数：
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('无论成功失败本次读取操作完毕') 
}

「课堂练习」

实现图片上传显示图片功能

要求：

上传图片必须是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)
参数一：是一个图像的引用（不仅可以是图片）
参数第二、三：是图像位置相对于鼠标指针位置的偏移量

// 拖动开始
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数据清除失败");
};

标签：function,transaction,objectStore,API,HTML5,var,evt,拖拽
来源： https://blog.csdn.net/weixin_51353891/article/details/120123258

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

``本地文件

单个文件

多个单个文件

readAsBinaryString(file)：将文件读取为二进制码,通常用来传后端。

「课堂练习」

拖拽API

「课堂练习」

浏览器数据库 indexedDB

indexedDB.open(databaseName, version)

indexedDB.deleteDatabase(databaseName)

IDBDatabase.createObjectStore(storeName, optional)

IDBDatabase.deleteObjectStore(storeName)

IDBObjectStore.createIndex(name, keyPath, optional)

IDBTransacation

objectStore.add(value，key)

objectStore.delete(key)

objectStore.get (key)

objectStore.put (value)

objectStore.openCursor() / objectStore.getAll()

objectStore.index (in DOMString name)

objectStore.clear()

ICode9

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

``本地文件

单个文件

多个单个文件

readAsBinaryString(file)： 将文件读取为二进制码,通常用来传后端。

「课堂练习」

拖拽API

「课堂练习」

浏览器数据库 indexedDB

indexedDB.open(databaseName, version)

indexedDB.deleteDatabase(databaseName)

IDBDatabase.createObjectStore(storeName, optional)

IDBDatabase.deleteObjectStore(storeName)

IDBObjectStore.createIndex(name, keyPath, optional)

IDBTransacation

objectStore.add(value，key)

objectStore.delete(key)

objectStore.get (key)

objectStore.put (value)

objectStore.openCursor() / objectStore.getAll()

objectStore.index (in DOMString name)

objectStore.clear()

readAsBinaryString(file)：将文件读取为二进制码,通常用来传后端。