实验6 HTML5 Web Storage 一、简介 1、内容：Web Storage概述、localStorage、sessionStorage、HTML5文件上传、文件读取。 2、拓展：Web Storage作为简易数据库使用方法、Web Sql数据库。二、概述 1、Web Storage概述 Web存储更加安全快速，这些数据只用于用户请求网站数据上，也可以存储大量数据，不影响网站性能。 Cookie限制： 1、大小限制：cookie<4KB； 2、带宽限制：涉及cookie请求会在服务器和浏览器间来回传送，访问页面时，cookie数据会消耗网络带宽。 3、安全风险：cookie频繁在网络中传输，不加密是有安全风险的。 Web Storage优势： 1、存储空间：5-10MB，与具体浏览器无关； 2、存储位置：仅仅在本地客户端，不会被发送到服务器； 3、接口丰富：更丰富、应用的接口，操作简便。 2、localStorage 特点：持久化本地存储，除非主动手动删除，否则数据一直不会过期。方法： 1）设置 setItem(key,value)：在本地客户端存储一个字符串类型的数据。 setItem.key=value：也可以像这样直接存储。 localStorage.setItem(key, value); 保存数据例子： //方法1向本地存储中添加一个名为name,值为"syl"的key-value对象 localStorage.setItem("name", "syl"); //方法2 localStorage["price"] = 1314; //方法3 localStorage.amount = 520; 2）获取 getItem(key)：读取已存储在本地的数据，获取键值。 localStorage.key：也可以像这样直接获取值。 localStorage.getItem(key); 读取数据 3）删除 removeItem(key)：移除已存储在本地数据，通过键名作为参数删除数据。 localStorage.clear()：也可以一次性清除 localStorage.removeItem(key); 通过key删除单个本地数据完整例子：

简单Web留言本

效果： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20190505-1557037744457) 3、sessionStorage 生命周期：进入网站到关闭浏览器的时间 sessionStorage方法使用与localStorage方法使用类似。保存数据：sessionStorage.setItem(key,value); 读取数据：sessionStorage.getItem(key); 删除单个数据：sessionStorage.removeItem(key); 清空数据：sessionStorage.clear(); 例子：

刷新页面看看效果。

关闭浏览器再运行看看效果

4、HTML5文件上传 4.1 背景使用插件很难跨平台，另一方面web应用依赖第三方插件也不独立。有了操作文件的API，可以让Web应用很轻松地通过JS来控制文件读取、写入、文件夹、文件等操作。 4.2 文件上传 multiple：按住Ctrl或Shift可选择多文件上传。 1）获取文件信息（待验证）选中文件通过HTMLInputElement.files属性返回，返回值是一个FileList对象，这个对象是包含了许多File文件的列表。比如我们首先运行上面例子代码，然后随便上传一个文件，按F12进入控制台输入：file.files; ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200428-1588077163453) lastModifed：UNIX timestamp 形式的最后修改时间。 astModifiedDate：Date 形式的最后修改时间。 name：文件名。 size：文件的字节大小。 type：文件 MIME 类型。当类型不确定时为 ""。 webkitRelativePath：此处为空，当在 input 上加 webkitdirectory 属性时，用户可选择文件夹，此时 webkitRelativePath 表示文件夹中文件的相对路径。注：FileList对象由DOM提供，列出了所有用户选择的文件夹，每一个代表一个File对象，可通过检查文件列表length属性决定用户可以选多少文件，各个File对象可以方便通过访问文件列表来获取，像访问数组那样。限制文件上传类型： accept="image/png" 或 accept=".png" accept="image/png, image/jpeg" 或 accept=".png, .jpg, .jpeg" accept="image/*" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" accept：接收一个逗号分隔的MIME类型字符串。例子： 4.3 文件读取 File对象获取到文件描述信息，但没有文件中信息。HTML5提供了FileReader对象，允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容。创建FileReader实例： var reader = new FileReader(); 属性 FileReader.error：读取文件时发生的错误，只读。语法：var error = instanceOffFileReader.error; FileReader.readyState：FileReader状态数字，只读。取值如下： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200428-1588077769823) 语法：var state = instanceOfFileReader.readyState; 事件处理： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200428-1588077875485) 方法： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200428-1588077879850) 例子：文件读取

效果： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200428-1588077922080) 4、WebStorage作为简易数据库使用方法主要核心思想是利用json格式作为文本保存来保存对象、获取对象。源代码如下：简易数据库示例

使用Web Storage来做简易数据库示例

姓名:
邮箱:
电话号码:
描述:

请输入姓名:

![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20190505-1557037544895) 上述保存数据可点击F12-->Application-->Local Storage即可查看数据。 5、Web SQL数据库 Web SQL数据库API并不是HTML5规范的一部分，它是一个独立的规范，引入了一组使用SQL操作客户端数据库的APIs。操作本地数据库基本步骤：1、openDatabase()：创建一个访问数据库的对象； 2、使用第一步创建的数据库访问对象执行transaction方法，通过此方法可设置一个开启事务成功的事件响应方法，在事件响应中可以执行SQL； 3、通过executeSql方法执行查询，查询可以是CURD。具体方法和参数：打开数据库：var db = openDatabase("student", "1.0", "学生表", 1024*1024, function() {}); 参数含义： (database_name, version, description, size, callfunction()); 事务处理：db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); }); 功能说明：防止对数据库访问和执行有关操作时受到外界干扰，因为在Web页面，可能同时有很多人对页面访问，访问数据库时，正操作的数据被别的用户修改了，会引发很多意想不到的结果。 executeSql方法执行查询：tx.executeSql( sqlQuery, [value1, value2..], dataHandler, errorHandler); 参数说明：具体执行的sql语句，可以是create、select、update、delete； [value1, value2..]：sql语句中所有使用到的参数数组，在executeSql方法，将sql语句所要使用的参数先用 "?" 代替，然后依次将这些参数组放在第二个参数中，如： tx.executeSql(" UPDATE people set age=? where name=?;", [age,name]); dataHandler：执行成功时调用的回调函数，通过该函数可获得查询结果集。该回调函数的传递方法如下： function dataHandler(transaction, results){ // 执行sql语句成功时处理 } errorHandler：执行失败时调用的回调函数，该回调函数的传递方法如下所示： function errorHandler（transaction,errmsg){ // 执行sql语句出错时处理 } wget http://labfile.oss.aliyuncs.com/jquery/1.11.1/jquery.min.js #Terminal获取jQuery文件代码：

用户名：
标题：
留言：

效果： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20190505-1557040418615) 三、小结本节主要学习了Web Storage：localStorage+WebStorage、文件上传的简单使用。还有历史遗留WebStorage作为数据库使用、Web SQL数据库的使用。概念不太复杂，重要的是实践。这里面涉及JS的一些东西尚未掌握，需要多加综合实践理解。

“HTML5 简明教程”实验报告