HTML5教程

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>
  1. 多个单个文件

<!-- 如果你想让用户选择多个文件,只需在 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('无论成功失败本次读取操作完毕') 
}

「课堂练习」

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

文件存储练习.gif

要求

  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 。在操作期间,会触发一些事件类型,有一些事件类型可能会被多次触发,所有的 拖拽事件类型 有一个对应的 拖拽全局属性,其内容如下:

事件产生事件的元素触发时刻
dragstart可拖拽元素本身当用户开始拖拽一个元素或选中的文本时触发
drag被拖放的元素当拖拽元素或选中的文本时触发。
dragenter拖放的目标元素(被拖拽项目可能放置的地方)当拖拽元素或选中的文本到一个可释放目标时触发
dragover拖放的目标元素 (被拖拽项目可能放置的地方)当元素或选中的文本被拖到一个可释放目标上时触发(每100毫秒触发一次)。
drop拖放的目标元素当元素或选中的文本在可释放目标上被释放时触发
dragend可拖拽元素本身当拖拽操作结束时触发(无论拖拽是成功还是被取消)

注意:在HTML5中 要实现拖放操作,至少要经过如下两个步骤

  1. 将想要拖放的对象元素的draggable属性设置为true,注意img元素和a元素(必须指定href)默认允许拖放
  2. 编写与拖放有关的事件处理代码,如定义拖拽数据、定义拖拽效果、定义放置区域、处理放置效果、处理拖拽结束

案例

  1. 将元素设置为可拖拽的
<div id="dragme" draggable="true" style="width: 200px;border: 1px solid red ">请拖动我</div>
  1. 定义拖拽数据

应用程序可以在拖拽操作中包含任意数量的数据项。每个数据项都是一个 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);
})
  1. 定义拖拽图像(可选)

拖拽过程中,浏览器会在鼠标旁显示一张默认图片。当然,应用程序也可以通过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);
})
  1. 定义拖拽效果(可选)

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);
})
  1. 定义放置区域

当拖拽一个项目到 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() 来阻止对这个事件的其它处理过程(如触点事件或指针事件)。

  1. 处理放置效果、处理拖拽结束

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;  // 所有被拖拽的元素都在改属性中

}

「课堂练习」

实现拖拽图片上传显示图片功能(支持多文件拖拽)

拖拽练习.gif

要求

  1. 在页面创建一个拖拽目标区域,支持外部文件拖拽到当前区域
  2. 支持拖拽多个文件,但只有上传文件必须是image类型才会展示在页面上

浏览器数据库 indexedDB

介绍: indexedDB 是一种底层 API,用于在客户端存储大量的结构化数据(也包括文件/二进制大型对象(blobs))。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用,但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。

IndexedDB 是一个事务型数据库系统,类似于基于 SQL 的 RDBMS。 然而,不像 RDBMS 使用固定列表,IndexedDB 是一个基于 JavaScript 的面向对象数据库。IndexedDB 允许您存储和检索用键索引的对象;可以存储结构化克隆算法支持的任何对象。您只需要指定数据库模式,打开与数据库的连接,然后检索和更新一系列事务。

概念

  1. 数据库(IndexedDB): 数据库是一系列相关数据的容器。每个域名(严格的说,是协议 + 域名 + 端口)都可以新建任意多个数据库。

IndexedDB 数据库有版本的概念。同一个时刻,只能有一个版本的数据库存在。如果要修改数据库结构(新增或删除表、索引或者主键),只能通过升级数据库版本完成。

  1. 对象仓库(object store): 每个数据库包含若干个对象仓库。它类似于关系型数据库的表格。

  2. 数据记录:对象仓库保存的是数据记录。每条记录类似于关系型数据库的行,但是只有主键和数据体两部分。主键用来建立默认的索引,必须是不同的,否则会报错。主键可以是数据记录里面的一个属性,也可以指定为一个递增的整数编号。

//该对象中,id属性可以当作主键。数据体可以是任意数据类型,不限于对象。
{ id: 1 , text: 'foo' }
  1. 索引:为了加速数据的检索,可以在对象仓库里面,为不同的属性建立索引。

  2. 事务:数据记录的读写和删改,都要通过事务完成。事务对象提供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与本地数据库的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!