Web前端技术课件-10. HTML5文件与数据处理

HTML5数据存储学习导图10.1HTML5文件操作10.1.1FileList对象和file对象在HTML5中，通过添加multiple属性，允许file控件一次选择多个文件，其中每一个文件都是一个file对象，FileList对象则为这些file对象的列表，代表用户选择的所有文件。通过file对象的属性，可以获取文件的信息，name属性用来获取不包括路径的文件名，size属性用来获取以字节为单位的文件大小，type属性则返回文件的MIME类型，lastModified属性表示文件最后一次修改时间。10.1.1FileList对象和file对象10.1.2BLOB对象Blob（BinaryLargeObject）对象相当于一个容器，用于存放二进制数据。它有两个属性，size属性表示一个Blob对象的字节长度，type属性表示Blob的MIME类型，如果是未知类型，则返回一个空字符串。Blob对象可以使用Blob构造函数来创建。例如：varblob=newBlob(['hello'],{type:"text/plain"});，其中第一个参数是一个数组，可以存放ArrayBuffer对象、ArrayBufferView对象、Blob对象和字符串；第二个参数指定文件的MIME类型。10.1.2BLOB对象对于图像类型的文件，Blob对象的type属性都是以image/开头，后跟具体图像类型，利用这一特性可以在JavaScript中判断用户选择的文件是否为图像文件。10.1.3FileReader接口FileReader接口主要用来把文件读入内存，并读取文件中的数据。FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据。在使用FileReader接口前，一般需要先测试浏览器对FileReader的支持情况，如果支持的话，再创建FileReader对象。10.1.3FileReader接口FileReader接口方法10.1.3FileReader接口FileReader接口事件10.1.3FileReader接口FileReader接口文件读取方法10.1.3FileReader接口FileReader接口文件读取方法10.1.4元素与文件的拖放而在HTML5中，要拖放一个元素，只要设置元素的dragable属性为true，同时响应与元素拖放相关的事件即可10.1.4元素与文件的拖放元素拖放操作图片文件拖放操作10.2数据交换格式JSON10.2.1JSON概述JSON（JavaScriptObjectNotation）是一种独立于语言和平台的轻量级纯文本数据交换格式，它基于JavaScript的一个子集，易于人的编写和阅读，也易于机器解析。JSON中最基本的数据是键值对形式，即Key:Value的结构。例如{"FirstName":"John"}对象是JSON中常用的一种数据结构，它是使用键值对组成的无序集合，以"{"开始，同时以"}"结束，键值对之间以":"相隔，不同的键值对之间以","相隔。例如{"FirstName":"Bill","LastName":"Gates","DateOfBirth":"1955-10-28"}。10.2.1JSON概述JSON中另一种数据结构是数组，它是值的有序列表，以"["开始，同时以"]"结束，多个值之间用","相隔。例如["apple","banana","grape","orange"]。可以在一个对象中嵌套另一个对象或者数组。10.2.1JSON概述对象的值也可以是数组，数组中的元素也可以是对象。10.2.2JSON与JavaScriptJSON实际上只是纯文本的字符串，它是不能直接在JavaScript中使用的，如果要在JavaScript中访问JSON数据，需要调用JSON.Parse方法将JSON字符串转换成JavaScript对象。10.2.2JSON与JavaScriptJSON常用于在客户端和服务器之间进行数据交换。通常情况下，客户端的JavaScript对象需要先转换成JSON字符串，然后才能发送给服务器，此时可以使用JSON.stringify方法将JavaScript对象转换为字符串。10.3本地数据存储技术10.3.1SessionStorageHTML5中提供了两种在客户端本地数据存储方法，一种是持久性的本地存储（LocalStorage），另一种是会话级别的本地存储（SessionStorage）。sessionStorage是HTML5新增的JavaScript对象，主要用于数据的临时存储，数据只在当前浏览器会话期内有效，当用户关闭浏览器窗口后会话结束，数据会自动清除。在sessionStorage中，数据以Key-Value的形式进行存储。10.3.1SessionStoragesessionStorage方法的使用。10.3.2LocalStoragelocalStorage用于数据的持久化存储，既使关闭浏览器，数据也不会丢失，除非用户自己删除数据。使用localStorage记住登录名和密码10.3.3WebSQLDatabaseWebSQLDatabase并不是HTML5的标准规范，它是基于sqlite数据库技术，使用SQL操作客户端数据库的API，支持标准的SQLCRUD操作。虽然部分浏览器，如Chrome已经实现了相关API，但是这一标准目前处于废弃状态，没有得到官方认为。10.3.4IndexedDBIndexedDB允许存储大量数据，提供查询接口，还能建立索引，这些功能都是LocalStorage所不具备的。就数据库类型而言，IndexedDB不属于关系型数据库（不支持SQL查询语句），更接近NoSQL数据库。内部都是采用对象仓库（objectstore）进行存储，在对象仓库中数据以键值对的形式保存，每一条记录都有对应的主键；IndexedDB操作都是异步的，不会锁死浏览器；IndexedDB支持事务；IndexedDB受到同源限制，每一个数据库对应创建它的域名，网页只能访问自身域名下的数据库，而不能访问跨域的数据库；IndexedDB的储存空间比LocalStorage大得多。10.3.4IndexedDBIndexedDB数据库操作示例10.4离线应用和客户端缓存10.4.1离线状态检测离线Web应用指设备在没有联网的情况下仍然能运行的应用，HTML5支持离线Web应用开发，包括离线状态检测、应用缓存等。HTML5使用navigator.onLine属性判断设备在线状态，该属性是一个只读属性，它返回一个Boolean值，其中true表示设备处于在线状态，false表示设备离线。HTML5还定义了两个事件：online和offline。其中online事件是当网络从离线变为在线时触发，而offline事件正好相反，在网络从在线变为离线时触发。10.4.1离线状态检测设备在线/离线状态检测10.4.2应用缓存HTML5应用缓存，即ApplicationCache，是从浏览器的缓存中分出来的一块缓存区。可以使用一个描述文件（manifestfile），列出要下载和缓存的资源，这样就能在缓存区中保存数据了。要使用applicationcache，首先需要定义缓存清单文件manifest，该文件是一个采用UTF-8编码方式编码的文本文件，目的是告诉浏览器需要缓存哪些资源描述文件。10.4.2应用缓存定义一个缓存描述文件offline.appcache定义一个缓存描述文件offline.appcache10.4.2应用缓存创建缓存描述文件后，需要在web页面中进行引用，其基本形式为：<htmlmanifest="offline.appcache"></html>。其中文件后缀名可以自定义，早期大多使用.manifest，现在推荐使用.appcache。在web服务器上配置正确的MIME-type，即"text/cache-manifest"，以apache服务器为例，在apache安装目录下找到httpd.conf文件，添加AddTypetext/cache-manifest.appcache。上述操作完成后，就可以在应用程序中使用applicationcache。10.4.2应用缓存一旦应用被缓存，它就会保持缓存直到发生下列情况：用户清空浏览器缓存manifest缓存清单文