WEB应用在用户浏览器端存储数据,而不是使用表
分类:巴黎人-前端

从数据库中除去数据

剔除数据应用delete方法,同上看似:

var request = db.transaction(['movies'], 'readwrite') .objectStore('movies') .delete('27054612'); // 通过键id来删除 request.onsuccess = function(event) { console.log('删除成功!'); console.log(event.target.result); };

1
2
3
4
5
6
7
8
var request =
    db.transaction(['movies'], 'readwrite')
      .objectStore('movies')
      .delete('27054612');  // 通过键id来删除
request.onsuccess = function(event) {
    console.log('删除成功!');
    console.log(event.target.result);
};

 

键范围

游标也得以接受二个键,也便是经过键来设定游标查找的界定;
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebStorage DEMO</title>
</head>
<body>
<div class="networkStatus">
<button class="clear">清空数据</button>
<button class="add">增添数码</button>
<button class="query">查询数据</button>
<button class="delete">删除数据</button>
<button class="cursor">使用游标查询</button>
<button class="keyRange">使用keyrange查询</button>
<button class="index">使用index</button>
</div>

<script>
let network = document.querySelector('.networkStatus'),
addBtn = document.querySelector('.add'),
queryBtn = document.querySelector('.query'),
deleteBtn = document.querySelector('.delete'),
cursorBtn = document.querySelector('.cursor'),
clearBtn = document.querySelector('.clear'),
keyRange = document.querySelector('.keyRange'),
indexBtn = document.querySelector('.index')
;

// 判定网路是还是不是在线
// if (navigator.onLine) {
// network.innerText = "网络在线";
// } else {
// network.innerText = "互联网掉线";
// }

// // 监察和控制互联网状态的风浪:online 和 offline, 那八个事件在window对象上
// window.addEventListener('online', () => {
// network.innerText = "互连网在线";
// });

// window.addEventListener('offline', () => {
// network.innerText = "网络掉线";
// });

//--------cookie的使用---------------
let CookieUtil = {
get: (name) => {
let cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null;

  if (cookieStart > -1) {
    let cookieEnd = document.cookie.indexOf(';', cookieStart);
    if (cookieEnd === -1) {
      cookieEnd = document.cookie.length;
    }
    cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
  }

  return cookieValue;
},
set: function (name, value, expires, path, domain, secure) {
  let cookieText = encodeURIComponent(name) + '=' +
                   encodeURIComponent(value);

  if (expires instanceof Date) {
    cookieText += '; expires=' + expires.toGMTString();
  }

  if (path) {
    cookieText += '; path=' + path;
  }

  if (domain) {
    cookieText += '; domain=' + domain;
  }

  if (secure) {
    cookieText += '; secure';
  }

  document.cookie = cookieText;
},

// 删除cookie, 并没有直接的删除cookie的方法,这里通过重新设置cookie名称,来对cookie进行替换
// 同时 将过期时间expires设置为过去的时间,
unset: function(name, path, domain, secure) {
  this.set(name, '', new Date(0), path, domain, secure);
}

}

CookieUtil.set('name', 'hexon');
CookieUtil.set('book', 'Profession Javascript');

// 读取cookie的值
// console.log(CookieUtil.get('name'));
// console.log(CookieUtil.get('book'));

// 删除cookie
CookieUtil.unset('name');
CookieUtil.unset('book');

// 设置cookie, 包涵它的门路、域、失效日期
CookieUtil.set('name', 'Hexon', 'books/projs/', 'www.wrox.com', new Date('January 1, 2017'));

// 删除刚刚安装的cookie
CookieUtil.unset('name', 'books/projs/', 'www.www.wrox.com');

// 设置安全的cookie
CookieUtil.unset('name', 'hexon', null, null, null, null, true)

// --- IndexedDB 数据库的应用
var request = window.indexedDB.open('dbName', 2)
var db;
const dbName = 'the_name';
// 创立多少个数量
const customerData = [
{ ssn: '444-44-4444', name: 'AAA', age: 35, email: 'AAA@company.com'},
{ ssn: '666-66-6666', name: 'CCC', age: 35, email: 'CCC@company.com'},
{ ssn: '777-77-7777', name: 'DDD', age: 32, email: 'DDD@home.org'},
{ ssn: '555-55-5555', name: 'BBB', age: 32, email: 'BBB@home.org'},

];

window.indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB || window.webkitIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction || {READ_WRITE: "readwrite"};
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
window.IDBCursor = window.IDBCursor || window.webkitIDBTransaction;

if (!window.indexedDB) {
window.alert("Your browser doesn't support a stable version of IndexedDB.")
}

// 3 是确立的数据库版本,如果名字为MyTestDatabase的数据库子虚乌有,就能够创制该数据库,然后 onupgradeneeded 事件会被触发;
// 借使数据仓库储存在,但是对版本晋级了,也会触发onupgradeneeded事件,
// 注意:版本号是一个 unsigned long long 类型的值,由此不用使用float,不然会将其转移为其最左近的寸头

// 生成处理程序
request.onerror = function (event) {
// do Something
alert('Database error: ' + event.target.errorCode);
};

request.onsuccess = function (event) {
// do Something
console.log('创设数据库成功');
db = event.target.result; // 成立成功后,e.target.result 中储存的是IDBDatabase对象的实例
}

// 当创立三个新的数量库 可能 更新已存在数据库的本子, onupgradeneeded事件将会被触发,新的靶子存款和储蓄在event.target.result中。
// 在该管理程序中,数据库已经颇具先前版本的目的存储,因而无需再一次创建这么些目的存款和储蓄,只需求创设任何大家需求的对象存款和储蓄,只怕
// 从先前版本中删去不在须要的目的存款和储蓄。假若要求转移当前目的存款和储蓄,则必得先删除旧的对象存储,然后在运用新的选项创制。
// 删除旧的目的存款和储蓄,在其上的消息都会被删除;
// 注意:该事件是举世无双一个能够对数据库实行操作的地点,在该事件之中,你对目的存款和储蓄举行删减、修改或移除索引
request.onupgradeneeded = function(event) {
console.log('onupgradeneeded');
var db = event.target.result;

// 创建一个   对象存储空间,名为customers
var objectStore = db.createObjectStore('customers', {keyPath: 'ssn'});
// 对于某些数据,可以为一个对象存储空间指定多个键。比如,若要通过用户ID 和用户名 两种方式来保存用户资料,就需要通过两个键来存取记录
// 因此可以使用createIndex,名字是有可能重复的,所以其unique 设置为 false ;第一个name是索引的名字,该名字是索引的名字,第二个name是索引的属性的名字,该名字要与对象中的属性相同
objectStore.createIndex('name', 'name', { unique: false});

// // 创建一个email的索引,该email是独特的,所以 unique 设置为 true
objectStore.createIndex('email', 'email', { unique: true});

}

function save(data) {
/// 对于数据库的靶子存款和储蓄空间中数据的读取或修改数据,都要透过事物来公司全体操作
// 最简便的始建事物的艺术是:var transaction = db.transaction();
let transaction = db.transaction('customers', 'readwrite'); // 创设多少个业务,并定义该事情的操作为 “readwrite” ,并重返其索引
let store = transaction.objectStore('customers'); // 获得索引后,使用objectStore()方法并传播存款和储蓄空间的名号,就足以访谈特定的囤积空间

for (var i in customerData) {
  let req = store.put(customerData[i]);   // 往一个存储空间中添加数据
}

transaction.oncomplete = function(event) {
  console.log(event.target);
  alert('存储数据完成');
};

transaction.onsuccess = function(event ) {
  console.log('onsuccess 事件');
}

}

function clear() {
// body...
let transaction = db.transaction('customers', 'readwrite');
let store = transaction.objectStore('customers').clear();
store.onerror = function(event) {
console.log('清空数据失败');
}
store.onsuccess = function(event) {
console.log('清空数据成功');
}
}

// 使用事务 直接通过已知的键索引 单个对象 (只可以索引单个对象)
function getData() {
let transaction = db.transaction('customers', 'readwrite'); // 创制四个东西, 并定义该业务的操作为 "readonly"
let store = transaction.objectStore('customers').get('444-44-4444'); // 使用get() 能够获得值

store.onerror = function (event) {
  alert('did not get the object');
}

store.onsuccess = function (event) {
  var result = event.target.result;
  console.log(result);
  alert('获取数据完成! 年龄是: ' + result.age);
}

}

function deleteData() {
let transaction = db.transaction('customers', 'readwrite');
let store = transaction.objectStore('customers');
store.delete('444-44-4444');
alert('s删除数据造成');
}

// 在事情内成立游标查询 能够索引 八个指标(注意: 是三个对象)
// 游标不提前手提式有线电话机结果
function cursorQuery() {
let transaction = db.transaction('customers', 'readwrite'),
store = transaction.objectStore('customers'),
request = store.openCursor(null) ; // 这里创办游标

request.onsuccess = function (event) {

  // event.target.result 中保存的是在存储空间中查询到的对象
  // event.target.result 中有几个属性值,可以了解到查询到的对象中的细节,
  // key: 当前访问的对象的键
  // value:当前访问的实际对象
  // primaryKey: 游标使用的键
  // direction:数值,表示游标移动的方向

  let cursor = event.target.result;
  let value, updateRequest, deleteRequest;
  if (cursor) {
  //   if (cursor.key === '555-55-5555') {
  //     value = cursor.value;   // 获取到实际的访问对象
  //     value.name = 'hexon';   // 修改对象的name属性

  //     updateRequest = cursor.update(value);      // 调用update()方法可以用指定的对象,更新对象的value
  //     updateRequest.onsuccess = function() {
  //       // 处理成功
  //     }
  //     updateRequest.onerror = function() {
  //       // 处理失败
  //     }


  //     // 使用游标删除当前项
  //     // deleteRequest = cursor.delete();
  //     // deleteRequest.onsuccess = function() {
  //     //   // 删除成功处理
  //     // }
  //     // deleteRequest.onerror = function() {
  //     //   // 删除失败处理
  //     // }


  //   }
  //   console.log(event.target.result);
  // }
  console.log(cursor.value);
  cursor.continue();      // 移动到下一项,
  }
  request.onerror = function(event) {
    console.log('游标查询创建失败')
  }
}

}

// 使用keyrange查询
function keyRangeQuery() {
let transaction = db.transaction('customers', 'readwrite')
let store = transaction.objectStore('customers');
// 使用bound()方法 定义键范围
let range = IDBKeyRange.bound('555-55-5555', '777-77-7777', true, false);
// 将键传入游标创制
let request = store.openCursor(range);

request.onsuccess = function(event) {
  let cursor = event.target.result;
  if (cursor) {
    console.log('游标查询到的值' + JSON.stringify(cursor.value));
    cursor.continue()     // 移动到下一项
  }

}

request.onerror = function(event) {
  console.log("使用游标 + keyrange 查询失败")
}

}

// 使用索引
function useIndex() {
let store = db.transaction('customers').objectStore('customers'),
index = store.index('name');
request = index.openCursor();
request.onsuccess = function (event) {
let cursor = event.target.result;
if (cursor) {
console.log(cursor);
cursor.continue();
}
}
}

addBtn.addEventListener('click', function(e) {
save();
}, false);

deleteBtn.addEventListener('click', function(e) {
deleteData();
}, false);

queryBtn.addEventListener('click', function(e) {
getData();
}, false);

cursorBtn.addEventListener('click', function(e) {
cursorQuery();
}, false);

clearBtn.addEventListener('click', function(e) {
clear();
}, false);

keyRange.addEventListener('click', function(e) {
keyRangeQuery();
}),

indexBtn.addEventListener('click', function(e) {
useIndex();
})

</script>

</body>
</html>

长远分析HTML5中的IndexedDB索引数据库,html5indexeddb

那篇小说首要介绍了深切解析HTML5中的IndexedDB索引数据库,包罗事务锁等基本成效的相干应用示例,必要的敌人能够仿效下

介绍 IndexedDB是HTML5 WEB数据库,允许HTML5 WEB应用在客商浏览器端存款和储蓄数据。对于使用来讲IndexedDB极度有力、有用,能够在客户端的chrome,IE,Firefox等WEB浏览器中存储大批量多少,上面简要介绍一下IndexedDB的基本概念。
 
什么是IndexedDB IndexedDB,HTML5新的多少存款和储蓄,能够在顾客端存款和储蓄、操作数据,可以使利用加载地越来越快,越来越好地响应。它不相同于关系型数据库,具有数据表、记录。它影响着大家规划和创造应用程序的点子。IndexedDB 创立有数据类型和省略的JavaScript长久对象的object,种种object可以有目录,使其卓有成效地查询和遍历整个集结。本文为你提供了如何在Web应用程序中应用IndexedDB的诚实事例。
 
开始 我们须求在施行前包括下前边置代码

JavaScript Code复制内容到剪贴板

  1. var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;   
  2.     
  3. //prefixes of window.IDB objects   
  4. var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;   
  5. var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange   
  6.     
  7. if (!indexedDB) {   
  8. alert("Your browser doesn't support a stable version of IndexedDB.")   
  9. }  

 
打开IndexedDB 在开立数据库在此之前,大家先是供给为数据库制造数量,假使我们有如下的顾客音讯:

JavaScript Code复制内容到剪贴板

  1. var userData = [   
  2. { id: "1", name: "Tapas", age: 33, email: "[email protected]" },   
  3. { id: "2", name: "Bidulata", age: 55, email: "[email protected]" }   
  4. ];  

现行反革命我们需求用open()方法展开我们的数据库:

JavaScript Code复制内容到剪贴板

  1. var db;   
  2. var request = indexedDB.open("databaseName", 1);   
  3.     
  4. request.onerror = function(e) {   
  5. console.log("error: ", e);   
  6. };   
  7.     
  8. request.onsuccess = function(e) {   
  9. db = request.result;   
  10. console.log("success: "+ db);   
  11. };   
  12. request.onupgradeneeded = function(e) {   
  13.     
  14. }  

如上所示,大家早就开采了名称叫"databaseName",钦定版本号的数据库,open()方法有多个参数:
1.先是个参数是数据库名称,它会检查评定名叫"databaseName"的数据库是或不是已经存在,如若存在则张开它,不然创造新的数据库。
2.次之个参数是数据库的本子,用于顾客更新数据库结构。
 
onSuccess处理 产生成功事件时“onSuccess”被触发,如果全体成功的央求都在此处理,大家能够透过赋值给db变量保存需要的结果供之后选择。
 
onerror的管理程序 发出错误事件时“onerror”被触发,如若张开数据库的长河中告负。
 
Onupgradeneeded管理程序 若果您想翻新数据库(成立,删除或退换数据库),那么你必得贯彻onupgradeneeded管理程序,使您可以在数据库中做其余变动。 在“onupgradeneeded”管理程序中是能够更换数据库的布局的举世无双地方。
 
创造和丰盛数据到表:
IndexedDB使用对象存储来积累数据,实际不是由此表。 每当多个值存款和储蓄在对象存款和储蓄中,它与一个键相关联。 它同意我们创设的任何对象存款和储蓄索引。 索引允许咱们访问存款和储蓄在指标存款和储蓄中的值。 上边包车型客车代码展现了怎么创制对象存款和储蓄并插入预先绸缪好的数目:

JavaScript Code复制内容到剪贴板

  1. request.onupgradeneeded = function(event) {   
  2. var objectStore = event.target.result.createObjectStore("users", {keyPath: "id"});   
  3. for (var i in userData) {   
  4. objectStore.add(userData[i]);    
  5. }   
  6. }  

小编们利用createObjectStore()方法创制一个目的存款和储蓄。 此方法接受三个参数:

  • 积攒的称号和参数对象。 在这里,我们有三个名称为"users"的目的存款和储蓄,并定义了keyPath,那是指标独一性的性子。 在此地,大家使用“id”作为keyPath,那一个值在目的存款和储蓄中是举世无双的,我们必须确认保证该“ID”的性质在对象存款和储蓄中的每一个对象中存在。 一旦成立了指标存款和储蓄,我们能够起来运用for循环增多数据进去。
     
    手动将数据增加到表:
    我们能够手动增添额外的数量到数据库中。

JavaScript Code复制内容到剪贴板

  1. function Add() {   
  2. var request = db.transaction(["users"], "readwrite").objectStore("users")   
  3. .add({ id: "3", name: "Gautam", age: 30, email: "[email protected]" });   
  4.     
  5. request.onsuccess = function(e) {   
  6. alert("Gautam has been added to the database.");   
  7. };   
  8.     
  9. request.onerror = function(e) {   
  10. alert("Unable to add the information.");    
  11. }   
  12.     
  13. }  

事先我们在数据库中做别的的CRUD操作(读,写,修改),必须运用专业。 该transaction()方法是用来钦赐大家想要进行事务管理的对象存储。 transaction()方法接受3个参数(第2个和第三个是可选的)。 第一个是我们要管理的靶子存款和储蓄的列表,第三个钦命大家是否要只读/读写,首个是本子变化。
 
从表中读取数据 get()方法用于从指标存款和储蓄中搜索数据。 大家在此以前已经设置对象的id作为的keyPath,所以get()方法将寻找具备一样id值的靶子。 下边包车型大巴代码将回到我们命名叫“Bidulata”的对象:

JavaScript Code复制内容到剪贴板

  1. function Read() {   
  2. var objectStore = db.transaction(["users"]).objectStore("users");   
  3. var request = objectStore.get("2");   
  4. request.onerror = function(event) {   
  5. alert("Unable to retrieve data from database!");   
  6. };   
  7. request.onsuccess = function(event) {    
  8. if(request.result) {   
  9. alert("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email);   
  10. } else {   
  11. alert("Bidulata couldn't be found in your database!");    
  12. }   
  13. };   
  14. }  

 
从表中读取全数数据
下边包车型大巴方法搜索表中的全部数据。 这里大家利用游标来搜寻对象存款和储蓄中的全部数据:

JavaScript Code复制内容到剪贴板

  1. function ReadAll() {   
  2. var objectStore = db.transaction("users").objectStore("users");    
  3. var req = objectStore.openCursor();   
  4. req.onsuccess = function(event) {   
  5. db.close();   
  6. var res = event.target.result;   
  7. if (res) {   
  8. alert("Key " + res.key + " is " + res.value.name + ", Age: " + res.value.age + ", Email: " + res.value.email);   
  9. res.continue();   
  10. }   
  11. };   
  12. req.onerror = function (e) {   
  13. console.log("Error Getting: ", e);   
  14. };    
  15. }  

该openCursor()用于遍历数据库中的多少个记录。 在continue()函数中持续读取下一条记下。
剔除表中的记录 下边包车型地铁办法从指标中删去记录。

JavaScript Code复制内容到剪贴板

  1. function Remove() {    
  2. var request = db.transaction(["users"], "readwrite").objectStore("users").delete("1");   
  3. request.onsuccess = function(event) {   
  4. alert("Tapas's entry has been removed from your database.");   
  5. };   
  6. }  

我们要将指标的keyPath作为参数字传送递给delete()方法。
 
最后代码
下边包车型大巴方法从目的源中删除一条记下:

JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <title>IndexedDB</title>  
  5. <script type="text/javascript">  
  6. var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;   
  7.     
  8. //prefixes of window.IDB objects   
  9. var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;   
  10. var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange   
  11.     
  12. if (!indexedDB) {   
  13. alert("Your browser doesn't support a stable version of IndexedDB.")   
  14. }   
  15. var customerData = [   
  16. { id: "1", name: "Tapas", age: 33, email: "[email protected]" },   
  17. { id: "2", name: "Bidulata", age: 55, email: "[email protected]" }   
  18. ];   
  19. var db;   
  20. var request = indexedDB.open("newDatabase", 1);   
  21.     
  22. request.onerror = function(e) {   
  23. console.log("error: ", e);   
  24. };   
  25.     
  26. request.onsuccess = function(e) {   
  27. db = request.result;   
  28. console.log("success: "+ db);   
  29. };   
  30.     
  31. request.onupgradeneeded = function(event) {   
  32.     
  33. }   
  34. request.onupgradeneeded = function(event) {   
  35. var objectStore = event.target.result.createObjectStore("users", {keyPath: "id"});   
  36. for (var i in userData) {   
  37. objectStore.add(userData[i]);    
  38. }   
  39. }   
  40. function Add() {   
  41. var request = db.transaction(["users"], "readwrite")   
  42. .objectStore("users")   
  43. .add({ id: "3", name: "Gautam", age: 30, email: "[email protected]" });   
  44.     
  45. request.onsuccess = function(e) {   
  46. alert("Gautam has been added to the database.");   
  47. };   
  48.     
  49. request.onerror = function(e) {   
  50. alert("Unable to add the information.");    
  51. }   
  52.     
  53. }   
  54. function Read() {   
  55. var objectStore = db.transaction("users").objectStore("users");   
  56. var request = objectStore.get("2");   
  57. request.onerror = function(event) {   
  58. alert("Unable to retrieve data from database!");   
  59. };   
  60. request.onsuccess = function(event) {    
  61. if(request.result) {   
  62. alert("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email);   
  63. } else {   
  64. alert("Bidulata couldn't be found in your database!");    
  65. }   
  66. };   
  67. }   
  68. function ReadAll() {   
  69. var objectStore = db.transaction("users").objectStore("users");    
  70. var req = objectStore.openCursor();   
  71. req.onsuccess = function(event) {   
  72. db.close();   
  73. var res = event.target.result;   
  74. if (res) {   
  75. alert("Key " + res.key + " is " + res.value.name + ", Age: " + res.value.age + ", Email: " + res.value.email);   
  76. res.continue();   
  77. }   
  78. };   
  79. req.onerror = function (e) {   
  80. console.log("Error Getting: ", e);   
  81. };    
  82. }   
  83. function Remove() {    
  84. var request = db.transaction(["users"], "readwrite").objectStore("users").delete("1");   
  85. request.onsuccess = function(event) {   
  86. alert("Tapas's entry has been removed from your database.");   
  87. };   
  88. }   
  89. </script>  
  90. </head>  
  91.     
  92. <body>  
  93. <button onclick="Add()">Add record</button>  
  94. <button onclick="Remove()">Delete record</button>  
  95. <button onclick="Read()">Retrieve single record</button>  
  96. <button onclick="ReadAll()">Retrieve all records</button>  
  97. </body>  
  98. </html>  

localStorage是不带lock功效的。那么要达成前端的多寡分享并且需求lock作用那就须求利用其余本积累方式,比如indexedDB。indededDB使用的是事务管理的机制,这实在正是lock功效。
  做那么些测量检验需求先轻松的卷入下indexedDB的操作,因为indexedDB的总是比较麻烦,何况三个测量试验页面都亟需用到

JavaScript Code复制内容到剪贴板

  1. //db.js   
  2. //封装事务操作   
  3. IDBDatabase.prototype.doTransaction=function(f){   
  4.   f(this.transaction(["Obj"],"readwrite").objectStore("Obj"));   
  5. };   
  6. //连接数据库,成功后调用main函数   
  7. (function(){   
  8.   //打开数据库   
  9.   var cn=indexedDB.open("TestDB",1);   
  10.   //成立数量对象   
  11.   cn.onupgradeneeded=function(e){   
  12.     e.target.result.createObjectStore("Obj");   
  13.   };   
  14.   //数据库连接成功   
  15.   cn.onsuccess=function(e){   
  16.     main(e.target.result);   
  17.   };   
  18. })();   
  19.   接着是七个测量试验页面   
  20. <script src="db.js"></script>  
  21. <script>  
  22. //a.html   
  23. function main(e){   
  24.   (function callee(){   
  25.     //先河一个事务   
  26.     e.doTransaction(function(e){   
  27.       e.put(1,"test"); //设置test的值为1   
  28.       e.put(2,"test"); //设置test的值为2   
  29.     });   
  30.     setTimeout(callee);   
  31.   })();   
  32. };   
  33. </script>  
  34. <script src="db.js"></script>  
  35. <script>  
  36. //b.html   
  37. function main(e){   
  38.   (function callee(){   
  39.     //开头四个政工   
  40.     e.doTransaction(function(e){   
  41.       //获取test的值   
  42.       e.get("test").onsuccess=function(e){   
  43.         console.log(e.target.result);   
  44.       };   
  45.     });   
  46.     setTimeout(callee);   
  47.   })();   
  48. };   
  49. </script>  

把localStorage换到了indexedDB事务处理。然则结果就差异

图片 1

测验的时候b.html中可能不会即时有出口,因为indexedDB正忙着管理a.html东西,b.html事务丢在了职业丢队列中等待。但是无论怎么样,输出结果也不会是1以此值。因为indexedDB的细微管理单位是专门的工作,实际不是localStorage那样以表明式为单位。那样一旦把lock和unlock之间要求处理的事物归入三个业务中就能够完成。别的,浏览器对indexedDB的支撑比不上localStorage,所以接纳时还得思量浏览器包容。

那篇文章主要介绍了尖锐深入分析HTML第55中学的IndexedDB索引数据库,包罗事务锁等基本成效的有关使...

为了提高Web应用的客户体验,想必很多开荒者都会项目中引入离线数据存储机制。可是面前遭遇有滋有味的离线数据手艺,哪类才是最能满意项目须要的呢?本文将帮忙各位找到最合适的那多少个。

在目的存款和储蓄空间上使用游标

采用游标常见的一种形式是获得对象存款和储蓄空间上的有着数据.

var list = []; var objectStore = db.transaction('movies').objectStore('movies'); objectStore.openCursor().onsuccess = function(event) { var cursor = event.target.result; if (cursor) { console.log('cursor:', cursor); list.push(cursor.value); cursor.continue(); } else { console.log('Get all data:', list); } };

1
2
3
4
5
6
7
8
9
10
11
12
var list = [];
var objectStore = db.transaction('movies').objectStore('movies');
objectStore.openCursor().onsuccess = function(event) {
    var cursor = event.target.result;
    if (cursor) {
        console.log('cursor:', cursor);
        list.push(cursor.value);
        cursor.continue();
    } else {
        console.log('Get all data:', list);
    }
};

图片 2

选用游标时,必要在成功回调里获得result对象,决断是或不是取完了数量:若数据已取完,resultundefined; 若未取完,则result是个IDBCursorWithValue对象,需调用continue()办法继续取多少。 也足以依照自个儿须要, 对数据开展过滤。

indexedDB2行业内部中,在目的存款和储蓄空间对象上放入了叁个getAll()主意,能够得到具备目的:

objectStore.getAll().onsuccess = function(event) { console.log('result:', event.target.result); };

1
2
3
objectStore.getAll().onsuccess = function(event) {
    console.log('result:', event.target.result);
};

介绍

IndexedDB正是一个数据库
其最大的风味是: 使用对象保存数据,实际不是利用表来保存数据,同不经常间,它是异步的

引言

乘机HTML5的赶来,各类Web离线数据本领步入了开荒人士的视野。诸如AppCache、localStorage、sessionStorage和IndexedDB等等,每一样才干都有它们各自适用的规模。例如AppCache就比较符合用于离线起动应用,可能在离线状态下使利用的一某个作用照常运作。接下来小编将会为大家作详细介绍,并且用部分代码片段来呈现什么行使这个技艺。

参照链接

  • IndexedDB的基本概念-MDN
  • 使用 IndexedDB-MDN
  • IndexedDB API接口-MDN
  • Indexed Database API 2.0 – w3c

    1 赞 2 收藏 1 评论

图片 3

作业和询问操作数据

最简便的创办专业的主意是:
var transaction = db.transaction(); // db就是前面的数据库对象
这种方法开创的政工,只好读取数据库中保留的保有目的

诚如用法是:
var transaction = db.transaction('customes', 'readwrite');
意味着只加载customers对象存款和储蓄空间中的数据,何况是以可读可写的主意加载

一旦不传第三个参数,则象征只可访谈,不可修改;

此处再次回到的transaction是专门的工作的目录

接下来采纳objectStore()办法并传到对象存储空间的名目,就可以访谈特定的存款和储蓄空间了;

如下:

let transaction = db.transaction('customers', 'readwrite'); 
let store = transaction.objectStore('customers'); 

收获了地点的store后,大家得以接纳如下方法对数码进行操作:

  • add()和put()方法:用于存储数据
    let req = store.add(data);
  • get(key)方法:获取键为key的对象
    let req = store.get(key);
  • delete(key)方法:删除键为key的靶子
    let req = store.delete(key);
  • clear()方法:清空对象存款和储蓄空间中的全部目的
    let req = store.clear();
    应用上述方法会重临多少个对象,通过对其增添onsuccess和onerror事件,能够检查实验操作是或不是中标

注意:通过oncomplete事件目的,访谈不到get()央求重返的其他数据,必需在响应央浼的onsuccess事件处理程序中技术访谈到数量

至于小编:njuyz

图片 4

(和讯天涯论坛:@njuyz) 个人主页 · 作者的篇章 · 11

七、关闭和删除数据库

  • 闭馆数据库只须求在数据库对象db上调用close()艺术就可以
db.close();

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f37afae779476637224-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f37afae779476637224-1" class="crayon-line">
db.close();
</div>
</div></td>
</tr>
</tbody>
</table>


关闭数据库后,`db`对象仍然保存着该数据库的相关信息,只是无法再开启事务(调用开启事务方法会报错,提示数据库连接已断开):

图片 5

  • 删去数据库则需求使用indexedDB.deleteDatabase(dbName)方法
JavaScript

window.indexedDB.deleteDatabase(dbName);

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f37afae77e452573671-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f37afae77e452573671-1" class="crayon-line">
window.indexedDB.deleteDatabase(dbName);
</div>
</div></td>
</tr>
</tbody>
</table>

upgradeneeded事件

触发该事件的基准:当张开的数据库不设有,或许传播的数据库版本version高于当前版本,则会触发该事件

upgradeneeded事件的效果:当张开了二个数据库之后,必要开垦叁个名称为:对象存款和储蓄空间 的玩意(可以知晓为数据就是贮存在那个空间里面,三个数据库能够创建四个目的存储空间),而 对象存款和储蓄空间 只能在upgradeneeded事件的管理函数中开创

使用时,注意以下三种情景:

  1. 当我们先是次张开创制数据库时,会触发upgradeneeded事件,大家就需求在里面创制对象存款和储蓄空间

  2. 当大家对数据库版本进行翻新时,也会触发该事件,那时能够在此创设新的靶子存款和储蓄空间,原本的对象存款和储蓄空间如故存在

注意:借使要求对目的存款和储蓄空间拓宽改换,那么只好先将积攒在它在那之中的数额读抽出来,再将其除去,然后利用新的选项去创立它,再写入原本的多寡

开采数据库并制造对象存款和储蓄空间的代码:

// 对于该API,各浏览器还未同一,所以需要对一些接口添加前缀
window.indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB || window.webkitIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction || {READ_WRITE: "readwrite"};
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
window.IDBCursor = window.IDBCursor || window.webkitIDBTransaction;

// 判断浏览器是否支持IndexedDB
if (!window.indexedDB) {
window.alert("Your browser doesn't support a stable version of IndexedDB.")
}

var request , db;
// 打开或创建 名为dbName的数据库
request = window.indexedDB.open('dbName', 2)
request.onsuccess = function (event) {
   db = event.target.result;
}

request.onerror = function (event) {
   console.log('错误代码: ' + event.target.errorCode);
}

request.onupgradeneeded = function(event) {
  db = event.target.result;  // 
  // 创建一个   对象存储空间,名为customers
  var objectStore = db.createObjectStore('customers', {keyPath: 'ssn'});
  // 对于某些数据,可以为一个对象存储空间指定多个键。比如,若要通过用户ID 和用户名 两种方式来保存用户资料,就需要通过两个键来存取记录
  // 因此可以使用createIndex,名字是有可能重复的,所以其unique 设置为 false ;第一个name是索引的名字,该名字是索引的名字,第二个name是索引的属性的名字,该名字要与对象中的属性相同
  objectStore.createIndex('name', 'name', { unique: false});

  // 创建一个email的索引,该email是独特的,所以 unique 设置为 true
  objectStore.createIndex('email', 'email', { unique: true});
}

示例

率先,你供给在页面上钦赐AppCache的布置文件:

XHTML

<!DOCTYPE html> <html manifest="manifest.appcache"> ... </html>

1
2
3
4
<!DOCTYPE html>
<html manifest="manifest.appcache">
...
</html>

在此间相对记得在劳务器端发表上述配置文件的时候,须求将MIME类型设置为text/cache-manifest,否则浏览器不可能常常分析。

接下去是创建在此之前定义好的各样财富。我们只要在这些示例中,你付出的是贰个交互类站点,顾客能够在上边联系别人何况公布冲突。客商在离线的事态下还是能够访问网址的静态部分,而关联以及发布商议的页面则会被别的页面替代,无法访谈。

好的,大家那就出手定义那些静态资源:

JavaScript

CACHE MANIFEST CACHE: /about.html /portfolio.html /portfolio_gallery/image_1.jpg /portfolio_gallery/image_2.jpg /info.html /style.css /main.js /jquery.min.js

1
2
3
4
5
6
7
8
9
10
11
CACHE MANIFEST
 
CACHE:
/about.html
/portfolio.html
/portfolio_gallery/image_1.jpg
/portfolio_gallery/image_2.jpg
/info.html
/style.css
/main.js
/jquery.min.js

旁注:配置文件写起来有少数很不便于。比方来讲,假设您想缓存整个目录,你不能够直接在CACHE部分用到通配符(*),而是只可以在NETWOMuranoK部分使用通配符把具备不该被缓存的能源写出来。

您不要求显式地缓存包蕴配置文件的页面,因为这么些页面会自动被缓存。接下来大家为关联和评价的页面定义FALLBACK部分:

JavaScript

FALLBACK: /contact.html /offline.html /comments.html /offline.html

1
2
3
FALLBACK:
/contact.html /offline.html
/comments.html /offline.html

最终大家用叁个通配符来阻止其他的财富被缓存:

JavaScript

NETWORK: *

1
2
NETWORK:
*

提起底的结果正是上边那样:

JavaScript

CACHE MANIFEST CACHE: /about.html /portfolio.html /portfolio_gallery/image_1.jpg /portfolio_gallery/image_2.jpg /info.html /style.css /main.js /jquery.min.js FALLBACK: /contact.html /offline.html /comments.html /offline.html NETWORK: *

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
CACHE MANIFEST
 
CACHE:
/about.html
/portfolio.html
/portfolio_gallery/image_1.jpg
/portfolio_gallery/image_2.jpg
/info.html
/style.css
/main.js
/jquery.min.js
 
FALLBACK:
/contact.html /offline.html
/comments.html /offline.html
 
NETWORK:
*

还有一件很入眼的事情要记得:你的能源只会被缓存一回!也等于说,借使能源立异了,它们不会自动更新,除非您改改了安插文件。所以有二个一级实行是,在陈设文件中追加一项版本号,每一趟换代能源的时候顺便更新版本号:

JavaScript

CACHE MANIFEST # version 1 CACHE: ...

1
2
3
4
5
6
CACHE MANIFEST
 
# version 1
 
CACHE:
...

本文由巴黎人手机版发布于巴黎人-前端,转载请注明出处:WEB应用在用户浏览器端存储数据,而不是使用表

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文