ตัวอย่างของการใช้ฐานข้อมูล DENDINEDDB ใน HTML5

ในที่เก็บข้อมูลท้องถิ่นของ HTML5 มีฐานข้อมูลที่เรียกว่า indexedDB จากส่วนก่อนหน้านี้: HTML5 Advanced Series: Web Storage เรารู้ว่าการจัดเก็บเว็บสามารถเข้าถึงข้อมูลง่าย ๆ ในการเข้าถึงในท้องถิ่นได้อย่างง่ายดาย แต่สำหรับที่เก็บข้อมูลที่มีโครงสร้างจำนวนมากข้อดีของดัชนี B นั้นชัดเจนยิ่งขึ้น ถัดไปลองดูว่า IndexedDB เก็บข้อมูลอย่างไร

เว็บไซต์หนึ่งสามารถมีฐานข้อมูล indexedDB หลายตัว แต่ชื่อของแต่ละฐานข้อมูลนั้นไม่ซ้ำกัน เราจำเป็นต้องเชื่อมต่อฐานข้อมูลเฉพาะผ่านชื่อฐานข้อมูล

 VAR Research = indexeddb.open ('dbname', 1); } คำขอ

เราใช้เมธอด indexedDB.Open เพื่อเชื่อมต่อฐานข้อมูล วิธีนี้จะส่งคืนวัตถุ IDBOPENDBREQUEST เพื่อแสดงวัตถุคำขอที่ร้องขอฐานข้อมูล เราสามารถกำหนดวิธีการที่การเชื่อมต่อประสบความสำเร็จหรือไม่สามารถดำเนินการได้โดยการตรวจสอบเหตุการณ์ onsuccccess และ onerror ของวัตถุคำขอ

เนื่องจากคลังข้อมูลในฐานข้อมูลไม่อนุญาตให้คลังสินค้าฐานข้อมูลเปลี่ยนในเวอร์ชันเดียวกันจึงจำเป็นต้องมีหมายเลขเวอร์ชันใหม่เพื่ออัปเดตเวอร์ชันในเมธอด indexeddb.open เพื่อหลีกเลี่ยงการแก้ไขฐานข้อมูลซ้ำ ๆ ในเวอร์ชันเดียวกัน หมายเลขเวอร์ชันต้องเป็นจำนวนเต็ม!

 VAR Research = indexeddb.open ('dbname', 2); IS = IS = IS = = ' + E.NewVersion);}

เรากำหนดวิธีการที่ดำเนินการเมื่อเวอร์ชันฐานข้อมูลได้รับการอัปเดตโดยการตรวจสอบเหตุการณ์ onupgradeneeded ของวัตถุคำขอ

หลังจากใช้ indexedb.open เพื่อเชื่อมต่อกับความสำเร็จของฐานข้อมูลแล้ววัตถุ IdbopendBrequest จะถูกส่งคืน

 VAR Research = indexeddb.open ('dbname', 2); ปิด (); console.log ('ฐานข้อมูลถูกปิด');}

 indexeddb.deletedatabase ('dbname');

Object Store เป็นพื้นฐานของฐานข้อมูล IndexedDB

 VAR Research = indexeddb.open ('dbname', 3); 'userId', autoincrement: false});

DB.CreateObjectStore วิธีการรับพารามิเตอร์สองตัว คุณสมบัติปุ่มกดในวัตถุนี้เป็นคีย์หลักซึ่งเทียบเท่ากับ ID ในตารางฐานข้อมูลเป็นคีย์หลัก แอตทริบิวต์ AutoiIncrement เป็นเท็จซึ่งหมายความว่าค่าคีย์หลักจะไม่เพิ่มขึ้นด้วยตัวเองเมื่อเพิ่มข้อมูลคุณต้องระบุค่าคีย์หลัก

หมายเหตุ: ในฐานข้อมูลชื่อคลังสินค้าวัตถุไม่สามารถทำซ้ำได้มิฉะนั้นเบราว์เซอร์จะรายงานข้อผิดพลาด

ในฐานข้อมูล DENDINEDDB ดัชนีจะถูกสร้างขึ้นผ่านแอตทริบิวต์ที่แน่นอนของวัตถุข้อมูล

 VAR Research = indexeddb.open ('dbname', 4); 'userId', autoincrement: false});

Method.createIndex ได้รับพารามิเตอร์สามตัว ค่าคือวัตถุ JS คุณสมบัติที่ไม่ซ้ำกันในวัตถุนี้เป็นจริงซึ่งหมายความว่าค่าดัชนีไม่สามารถเหมือนกันได้นั่นคือชื่อผู้ใช้ของข้อมูลทั้งสองไม่เหมือนกันและเท็จอาจเหมือนกัน

ใน indexedDB การดำเนินการข้อมูลทั้งหมดสามารถทำได้ในกิจการเท่านั้น หลังจากฐานข้อมูลสำเร็จคุณสามารถใช้วิธีการทำธุรกรรมของวัตถุ IDBOPENDBREQUEST เพื่อเปิดการอ่านหรืออ่านและเขียนธุรกรรมเท่านั้น

 การวิจัย var = indexeddb.open ('dbname', 5); tx.oncomplete = function (e) {console.log ('การทำธุรกรรมสิ้นสุดลง');} tx.onabort = ฟังก์ชั่น (e) {console.log ('ธุรกรรมถูกระงับ');}}

วิธีการ DB.Transaction ได้รับพารามิเตอร์สองพารามิเตอร์ พารามิเตอร์ที่สองคือโหมดการทำธุรกรรม สามารถส่งไปยัง ReadWrite สำหรับการอ่านและการเขียน

1. เพิ่ม (): เพิ่มข้อมูล รับพารามิเตอร์ไปยังวัตถุที่ต้องเก็บไว้ในคลังสินค้าวัตถุ
2. ใส่ (): เพิ่มหรือแก้ไขข้อมูล รับพารามิเตอร์ไปยังวัตถุที่ต้องเก็บไว้ในคลังสินค้าวัตถุ
3. รับ (): รับข้อมูล รับพารามิเตอร์ไปยังค่าคีย์หลักที่ต้องได้รับ
4. ลบ (): ลบข้อมูล รับพารามิเตอร์ไปยังค่าคีย์หลักที่ต้องได้รับ

 VAR Research = indexeddb.open ('dbname', 5); ',', ',' readwrite '); var store = tx.objectstore (' ผู้ใช้ '); ค่า); / / บันทึกข้อมูล var repk2 = store.get (1); DELETE (1); }}}}}}

บทบาทของ Add and Put นั้นคล้ายคลึงกัน และใช้เพิ่มเพื่อบันทึกข้อมูล

เรารู้ว่าข้างต้นสามารถรับข้อมูลโดยใช้วิธี GET () แต่จำเป็นต้องมีค่าคีย์หลัก หากเราต้องการรับข้อมูลช่วงต่างๆเราสามารถใช้เคอร์เซอร์ได้ เคอร์เซอร์ถูกสร้างและเปิดโดยวิธีการ opencursor ของคลังสินค้าวัตถุ

วิธีการ opencursor ได้รับสองพารามิเตอร์

 // ขอบเขตแสดงถึงการรวบรวมค่าคีย์หลักจาก 1 ถึง 10 (รวมถึง 1 และ 10) // ถ้าพารามิเตอร์ที่สามเป็นจริงหมายความว่าค่าคีย์ขั้นต่ำไม่ใช่ 1 ถ้าพารามิเตอร์ที่สี่เป็นจริงหมายความว่าไม่มีค่าคีย์สูงสุด 10 และค่าเริ่มต้นคือ FalseVar BoundRange = idbkeyrande.bound.bound (1, 10, เท็จเท็จ, เท็จ); พารามิเตอร์เดียว () เป็นค่าคีย์หลักประเภทจำนวนเต็ม VarmingRange = idbkeyrange เพียง (1); // พารามิเตอร์ที่สองเป็นตัวเลือกซึ่งหมายความว่าจริงไม่รวมคีย์หลักขั้นต่ำ 1, เท็จรวมอยู่ในและค่าเริ่มต้นไปยัง falsevar logerrange = idbkeyrange ของค่าคีย์หลักน้อยกว่า 10 Essence // พารามิเตอร์ที่สองเป็นทางเลือกซึ่งหมายความว่าจริงไม่รวมคีย์หลักที่ใหญ่ที่สุด 10 และเท็จรวมถึงและค่าเริ่มต้นคือ falsevar upperrange = idbkeyrange.upeperbound (10, false);

พารามิเตอร์ที่สองของวิธี OpenCursor แสดงถึงทิศทางการอ่านของเคอร์เซอร์

1. ถัดไป: ข้อมูลในเคอร์เซอร์ถูกจัดเรียงตามค่าคีย์หลัก
2. NextUnique: ข้อมูลในเคอร์เซอร์ถูกจัดเรียงตามค่าคีย์หลัก
3. ก่อนหน้า: ข้อมูลในเคอร์เซอร์ถูกจัดเรียงตามค่าหลักของค่าคีย์หลัก
4. Prevunique: ข้อมูลในเคอร์เซอร์ถูกจัดเรียงโดยค่าคีย์หลัก

 VAR Research = indexeddb.open ('dbname', 6); ',', ',', 'readwrite'); ction () {var cursor = this.result; }

เมื่อมีข้อมูลที่ตรงกับเงื่อนไขการค้นหาคุณสามารถอัปเดตข้อมูลผ่านวิธีการอัปเดต:

 Cursor.updata ({userId: cursor.key, ชื่อผู้ใช้: 'สวัสดี', อายุ: 18});

ข้อมูลนี้สามารถลบได้ผ่านวิธีการลบ:

 Cursor.delete ();

คุณสามารถอ่านข้อมูลถัดไปผ่านวิธีการ constinue มิฉะนั้นคุณจะไม่อ่านต่อหลังจากอ่านข้อมูลชิ้นแรก:

 Cursor.Continue ();

จากการเชื่อมต่อฐานข้อมูลการสร้างคลังสินค้าวัตถุดัชนีการดำเนินการและข้อมูลการดึงข้อมูลให้เสร็จสมบูรณ์กระบวนการที่สมบูรณ์ของข้อมูลการเข้าถึงดัชนี DB ด้านล่างผ่านตัวอย่างที่สมบูรณ์เพื่อให้เข้าใจฐานข้อมูล IndexedDB ได้ดีขึ้น ที่อยู่รหัส: indexeddb-demo

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้