5个HTML5的常用当地存储方法详解与先容(2)

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024,fn); // openDatabase() 要领对应的五个参数 // 别离为:数据库名称、版本号、描写文本、数据库巨细、建设回调

执行查询操纵:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)'); });

插入数据:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)'); tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")'); tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")'); });

读取数据:

db.transaction(function (tx) { tx.executeSql('SELECT * FROM WIN', [], function (tx, results) { var len = results.rows.length, i; msg = "<p>查询记录条数: " + len + "</p>"; document.querySelector('#status').innerHTML += msg; for (i = 0; i < len; i++){ alert(results.rows.item(i).name ); } }, null); });

由这些操纵可以看出,根基上都是用SQL语句举办数据库的相关操纵,假如你会MySQL的话,这个应该较量容易用。

5. IndexedDB

索引数据库 (IndexedDB) API(作为 HTML5 的一部门)对建设具有富厚当地存储数据的数据麋集型的离线 HTML5 Web 应用措施很有用。

同时它尚有助于当地缓存数据,使传统在线 Web 应用措施(好比移动 Web 应用措施)可以或许更快地运行和响应。

异步API:

在 IndexedDB 大部门操纵并不是我们常用的挪用要领,返回功效的模式,而是请求——响应的模式,好比打开数据库的操纵:

5个HTML5的常用内地存储要领详解与介绍

这样,我们打开数据库的时候,实质上返回了一个DB工具,而这个工具就在result中。

由上图可以看出,除了 result 之外。尚有几个重要的属性就是 onerror 、 onsuccess 、 onupgradeneeded (我们请求打开的数据库的版本号和已经存在的数据库版本号纷歧致的时候挪用)。

这就雷同于我们的 ajax 请求那样。我们提倡了这个请求之后并不能确定它什么时候才请求乐成,所以需要在回调中处理惩罚一些逻辑。

封锁与删除:

function closeDB(db){ db.close(); }function deleteDB(name){ indexedDB.deleteDatabase(name); }

数据存储:

indexedDB 中没有表的观念,而是 objectStore ,一个数据库中可以包括多个objectStore,objectStore是一个机动的数据布局,可以存放多种范例数据。

也就是说一个 objectStore 相当于一张表,内里存储的每条数据和一个键相关联。

我们可以利用每笔记录中的某个指定字段作为键值( keyPath ),也可以利用自动生成的递增数字作为键值( keyGenerator ),也可以不指定。

选择键的范例差异, objectStore 可以存储的数据布局也有差别。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsjyyx.html