HTML5의 IndexedDB 인덱스 데이터베이스_html5 튜토리얼 기술에 대한 심층 분석

소개
IndexedDB는 HTML5 WEB 애플리케이션이 사용자의 브라우저에 데이터를 저장할 수 있도록 하는 HTML5 WEB 데이터베이스입니다. IndexedDB는 클라이언트의 Chrome, IE, Firefox 및 기타 웹 브라우저에 많은 양의 데이터를 저장할 수 있는 매우 강력하고 유용합니다. 다음은 IndexedDB의 기본 개념에 대한 간략한 소개입니다.

IndexedDB란 무엇인가요
HTML5의 새로운 데이터 저장소인 IndexedDB는 클라이언트에 데이터를 저장하고 운영할 수 있어 애플리케이션의 로드 속도와 응답 속도가 향상됩니다. 데이터 테이블과 레코드가 있다는 점에서 관계형 데이터베이스와 다릅니다. 이는 우리가 애플리케이션을 디자인하고 생성하는 방식에 영향을 미칩니다. IndexedDB는 데이터 유형과 간단한 JavaScript 영구 객체를 사용하여 객체를 생성합니다. 각 객체는 인덱스를 가질 수 있으므로 전체 컬렉션을 효율적으로 쿼리하고 탐색할 수 있습니다. 이 기사에서는 웹 애플리케이션에서 IndexedDB를 사용하는 방법에 대한 실제 예를 제공합니다.

시작
실행하기 전에 다음 사전 코드를 포함해야 합니다

JavaScript 코드클립보드에 콘텐츠 복사

1. var indexedDB = window.indexedDB || window.mozIndexedDB || | window.msIndexedDB
3. //window.IDB 객체의 접두사
4. var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
5. var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange
7. if (!indexedDB) {
8. alert("귀하의 브라우저는 IndexedDB의 안정적인 버전을 지원하지 않습니다.")
9. }

IndexedDB 열기
데이터베이스를 생성하기 전에 먼저 데이터베이스에 대한 데이터를 생성해야 합니다.

JavaScript 코드클립보드에 콘텐츠 복사

1. var userData = [
2. { ID: "1", 이름: "Tapas", 나이: 33, 이메일: "tapas@example.com" },
3. { ID: "2", 이름: "Bidulata", 나이: 55, 이메일: "bidu@home.com" }
4. ]

이제 open() 메소드를 사용하여 데이터베이스를 열어야 합니다.

JavaScript 코드클립보드에 콘텐츠 복사

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

如上所示, 我们已经打开了name为"databaseName", 指定版本号的数据库, open()方法有个参数：
1.第一个参数是数据库명称，它会检测name称为"데이터베이스 이름"이 数据库是否已经存재, 如果存在则打开它,否则创建new数据库.
2. 용户更新数据库结构。
 
onSuccess处리
发生成功事件时“onSuccess”被触发，如果所有成功的请求city，我们可以通过赋值给db变保存请求的结果供以后使用。
 
onerror의 处理程序
发生错误事件时“onerror”被触发，如果打开数据库的过程中失败。
 
업그레이드 필요 ed处理程序
如果你想更新数据库（创建，删除或修改数据库），那么你必须实现업그레이드가 필요함何更改。 "업그레이드가 필요"할 때 处理程序中是可以改变数据库的结构的唯一地方。
 
创建和添加数据到表：
IndexedDB使用对象存储来存储数据，而不是通过表。储中，它与一个键相关联。 它允许我们创建的任何对象存储索引。 索引允许我们访问存储在对象存储值。 下면的代码显示了如何创建对象存储并插入预先准备好的数据：

JavaScript 코드复제内容到剪贴板

1. request.onupgradeneeded = 기능(이벤트) {   
2. var objectStore = 이벤트.target.result.createObjectStore("users", {keyPath: "id "});   
3. (userData의 var i) {   
4. objectStore.add(userData[i]);    
5. }   
6. }  

createObjectStore() 메소드를 사용하여 객체 저장소를 생성합니다. 이 메소드는 두 개의 매개변수, 즉 저장된 이름과 매개변수 객체를 허용합니다. 여기에는 "users"라는 객체 저장소가 있고 객체를 고유하게 만드는 속성인 keyPath를 정의합니다. 여기서는 "id"를 keyPath로 사용합니다. 이 값은 개체 저장소에서 고유하며 이 "ID"의 속성이 개체 저장소의 모든 개체에 존재하는지 확인해야 합니다. 객체 저장소가 생성되면 for 루프를 사용하여 데이터 추가를 시작할 수 있습니다.

테이블에 수동으로 데이터 추가:
데이터베이스에 추가 데이터를 수동으로 추가할 수 있습니다.

JavaScript 코드클립보드에 콘텐츠 복사

1. function Add() {
2. var 요청 = db.transaction(["users"], "readwrite").objectStore( "사용자")
3. .add({ id: "3", 이름: "Gautam", 연령: 30, 이메일: "gautam@store.org" })
5. request.onsuccess = 함수(e) {
6. alert("Gautam이 데이터베이스에 추가되었습니다.")
7. }
9. request.onerror = 함수(e) {
10. alert("정보를 추가할 수 없습니다.")
11. }
13. }

데이터베이스에서 CRUD 작업(읽기, 쓰기, 수정)을 수행하기 전에 트랜잭션을 사용해야 했습니다. transaction() 메소드는 트랜잭션 처리를 수행하려는 객체 저장소를 지정하는 데 사용됩니다. transaction() 메소드는 3개의 매개변수를 허용합니다(두 번째와 세 번째는 선택사항임). 첫 번째는 처리하려는 객체 저장소 목록이고, 두 번째는 읽기 전용/읽기-쓰기를 원하는지 지정하고, 세 번째는 버전 변경입니다.

테이블에서 데이터 읽기
객체 스토리지에서 데이터를 검색하는 데 get() 메서드가 사용됩니다. 이전에 객체의 ID를 keyPath로 설정했으므로 get() 메서드는 동일한 id 값을 가진 객체를 찾습니다. 다음 코드는 "Bidulata"라는 개체를 반환합니다.

JavaScript 코드클립보드에 콘텐츠 복사

1. 함수 읽기() {   
2. var objectStore = db.transaction(["users"]).objectStore("users") ;   
3. var 요청 = objectStore.get("2");   
4. request.onerror = 함수(이벤트) {   
5. alert("데이터베이스에서 데이터를 검색할 수 없습니다!");   
6. };   
7. request.onsuccess = 함수(이벤트) {    
8. if(request.result) {   
9. alert("이름: "   request.result.name   ", 나이: "   request.result.age   ", 이메일: "   request.result.email);   
10. } else {   
11. alert("Bidulata를 데이터베이스에서 찾을 수 없습니다!");    
12. }   
13. };   
14. }  

 
从表中读取所有数据
하향적 방법检索表中的所有数据。所有数据：

JavaScript 코드复제内容到剪贴板

1. 함수 ReadAll() {   
2. var objectStore = db.transaction("users").objectStore("users");    
3. var req = objectStore.openCursor();   
4. req.onsuccess = 함수(이벤트) {   
5. db.close();   
6. var res = event.target.result;   
7. if (res) {   
8. alert("키 "   res.key   " 는 "   res.value.name   ", 연령: "   res.value.age   ", 이메일: "   res.value.email);   
9. res.continue();   
10. }   
11. };   
12. req.onerror = 기능 (e) {   
13. console.log("Error Geting: ", e);   
14. };    
15. }  

该openCursor()사용于遍历数据库中多个记录。 지금continue()函数中继续读取下一条记录。
删除表中的记录
아래쪽 방법从对象中删除记录。

JavaScript 코드复제内容到剪贴板

1. function Remove() {
2. var 요청 = db.transaction(["users"], "readwrite").objectStore( "사용자").delete("1")
3. request.onsuccess = 함수(이벤트) {
4. alert("타파스 항목이 데이터베이스에서 제거되었습니다.")
5. }
6. }

객체의 keyPath를 delete() 메서드에 매개변수로 전달해야 합니다.

최종 코드
다음 메서드는 개체 소스에서 레코드를 삭제합니다.

JavaScript 코드클립보드에 콘텐츠 복사

1. >  
2. <머리>  
3. <메타 http-equiv=" 콘텐츠 유형" 콘텐츠="text/html;  charset=utf-8"  />  
4. <제목>IndexedDB제목>  
5. <스크립트 유형="text/ javascript">  
6. var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;   
7.     
8. //window.IDB 객체의 접두사   
9. var IDBTransaction = 창.IDBTransaction || window.webkitIDBTransaction || window.msIDB트랜잭션;   
10. var IDBKeyRange = 창.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange   
11.     
12. if (!indexedDB) {   
13. alert("귀하의 브라우저는 IndexedDB의 안정적인 버전을 지원하지 않습니다.")   
14. }   
15. var customerData = [   
16. { id: "1", 이름: "Tapas", 나이: 33, 이메일: "tapas@example.com" },   
17. { id: "2", 이름: "Bidulata", 연령: 55, 이메일: "bidu@home.com" }   
18. ];   
19. var db;   
20. var 요청 = indexedDB.open("newDatabase", 1);   
21.     
22. request.onerror = 기능(e) {   
23. console.log("error: ", e);   
24. };   
25.     
26. request.onsuccess = 기능(e) {   
27. db = 요청.result;   
28. console.log("성공: "  db);   
29. };   
30.     
31. request.onupgradeneeded = 기능(이벤트) {   
32.     
33. }  
34. request.onupgradeneeded = 기능(이벤트) {   
35. var objectStore = 이벤트.target.result.createObjectStore("users", {keyPath: "id "});   
36. (userData의 var i) {   
37. objectStore.add(userData[i]);    
38. }   
39. }   
40. 함수 Add() {   
41. var 요청 = db.transaction(["users"], "readwrite")   
42. .objectStore("사용자")   
43. .add({ id: "3", 이름: "Gautam", 나이: 30, 이메일: "gautam@store.org" });   
44.     
45. request.onsuccess = 기능(e) {   
46. alert("Gautam이 데이터베이스에 추가되었습니다.");   
47. };   
48.     
49. request.onerror = 기능(e) {   
50. alert("정보를 추가할 수 없습니다.");    
51. }   
52.     
53. }   
54. 함수 읽기() {   
55. var objectStore = db.transaction("users").objectStore("users");   
56. var 요청 = objectStore.get("2");   
57. request.onerror = 함수(이벤트) {   
58. alert("데이터베이스에서 데이터를 검색할 수 없습니다!");   
59. };   
60. request.onsuccess = 함수(이벤트) {    
61. if(request.result) {   
62. alert("이름: "   request.result.name   ", 나이: "   request.result.age   ", 이메일: "   request.result.email);   
63. } else {   
64. alert("Bidulata를 데이터베이스에서 찾을 수 없습니다!");    
65. }   
66. };   
67. }  
68. 함수 ReadAll() {   
69. var objectStore = db.transaction("users").objectStore("users");    
70. var req = objectStore.openCursor();   
71. req.onsuccess = 함수(이벤트) {   
72. db.close();   
73. var res = event.target.result;   
74. if (res) {   
75. alert("키 "   res.key   " 는 "   res.value.name   ", 연령: "   res.value.age   ", 이메일: "   res.value.email);   
76. res.continue();   
77. }   
78. };   
79. req.onerror = 기능 (e) {   
80. console.log("Error Geting: ", e);   
81. };    
82. }   
83. 기능 제거() {    
84. var 요청 = db.transaction(["users"], "readwrite").objectStore( "사용자").delete("1");   
85. request.onsuccess = 함수(이벤트) {   
86. alert("타파스 항목이 데이터베이스에서 제거되었습니다.");   
87. };   
88. }  
89. 스크립트>  
90. 머리>  
91.     
92. <몸>  
93. <버튼 클릭="추가( )">기록 추가버튼>  
94. <버튼 클릭="제거( )">기록 삭제버튼>  
95. <버튼 클릭="읽기( )">단일 레코드 검색버튼>  
96. <버튼 클릭="모두 읽기( )">모든 기록 검색버튼>  
97. 몸>  
98. html>  

锁

localStorage는 잠금 기능을 사용할 수 없습니다. DededDB를 사용하여 논리적으로 잠금을 해제할 수 있습니다.
　　做这个测试需要先简单的封装下indexedDB 操작품, 因为indexedDB 连接比较麻烦, 而且两个测试页면도시 需要用到

JavaScript 코드复제内容到剪贴板

1. //db.js
2. //트랜잭션 작업 캡슐화
3. IDBDatabase.prototype.doTransaction=함수(f){
4. f(this.transaction(["Obj"],"readwrite").objectStore("Obj"))
5. }
6. //성공 후 데이터베이스에 연결하고 기본 함수 호출
7. (함수(){
8. //데이터베이스 열기
9. var cn=indexedDB.open("TestDB",1);
//데이터 객체 생성
11. cn.onupgradeneeded=기능(e){
e.target.result.createObjectStore("Obj")
};
//데이터베이스 연결 성공
15. cn.onsuccess=함수(e){
메인(e.target.result)
};
})()
그러면 테스트 페이지가 2개가 나옵니다
20. <스크립트 src="db. js">스크립트>
21. <스크립트>
//a.html
함수 main(e){
(함수 피호출자(){
//거래 시작
e.doTransaction(function(e){
e.put(1,"test") //test 값을 1로 설정
e.put(2,"test") //test 값을 2로 설정
})
setTimeout(callee)
})()
};
32. 스크립트>
33. <스크립트 src="db. js">스크립트>
34. <스크립트>
35. //b.html
36. 함수 main(e){
37. (함수 피호출자(){
38. //거래 시작
39. e.doTransaction(function(e){
40. //테스트 값 가져오기
41. e.get("test").onsuccess=함수(e){
42. console.log(e.target.result)
43. };
44. })
45. setTimeout(callee)
46. })()
47. }
48. 스크립트>

localStorage를 indexedDB 트랜잭션 처리로 교체하세요. 하지만 결과는 다릅니다

테스트 중에는 indexedDB가 a.html 작업을 처리 중이고 b.html 트랜잭션이 트랜잭션 대기열에 대기하고 있기 때문에 b.html에 즉시 출력되지 않을 수 있습니다. 하지만 무슨 일이 있어도 출력 결과는 값 1이 되지 않습니다. indexedDB의 가장 작은 처리 단위는 localStorage와 같은 표현식이 아닌 트랜잭션이기 때문입니다. 이렇게 하면 잠금과 잠금 해제 사이에 처리해야 할 사항만 트랜잭션에 넣으면 됩니다. 또한 indexedDB에 대한 브라우저 지원은 localStorage만큼 좋지 않으므로 사용 시 브라우저 호환성을 고려해야 합니다.