HTML5 Local Storage indexedDB

indexedDB เป็น API ระดับต่ำที่เก็บข้อมูลที่มีโครงสร้างจำนวนมาก (รวมถึงไฟล์/ blobs) สำหรับการจัดเก็บไคลเอนต์ API ใช้ดัชนีเพื่อให้ได้การค้นหาข้อมูลที่มีประสิทธิภาพสูง

เมื่อเร็ว ๆ นี้มีความต้องการทางธุรกิจที่สามารถจัดเก็บข้อมูลออฟไลน์และสามารถอัปโหลดแบบฟอร์มและรูปภาพได้เมื่อมีสัญญาณเครือข่าย ดังนั้นฉันจึงศึกษา indexedDB ของ HTML5

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

 /* เข้ากันได้กับ indexeddb*/const indexeddb = window.indexeddb || เวอร์ชัน);

เนื่องจาก indexedDB เข้ากันได้กับเบราว์เซอร์ที่แตกต่างกันเราจึงต้องมีส่วนหนึ่งของฟังก์ชั่นที่เข้ากันได้กับ indexedDB

 request.addeventListener ('ความสำเร็จ', ฟังก์ชั่น (เหตุการณ์) {// เปิดหรือสร้างความสำเร็จของฐานข้อมูล}, false); .

หลังจากเชื่อมต่อกับฐานข้อมูลคำขอจะฟังสามรัฐ:

• ความสำเร็จ: เปิดหรือสร้างความสำเร็จของฐานข้อมูล
• ข้อผิดพลาด: ความล้มเหลวในการเปิดหรือสร้างฐานข้อมูล
• Upgradeneeded: อัปเดตฐานข้อมูล

สถานะที่ได้รับการอัพเกรดคือการตรวจสอบสถานะนี้เมื่อดัชนี DDDB สร้างฐานข้อมูลใหม่และ indexedb.open (ชื่อรุ่น) เวอร์ชัน (หมายเลขเวอร์ชันฐานข้อมูล) เมื่อหมายเลขเวอร์ชันไม่เปลี่ยนแปลงสถานะนี้จะไม่ถูกทริกเกอร์ การสร้างและการลบวัตถุของฐานข้อมูลดำเนินการภายใต้เหตุการณ์การตรวจสอบนี้

ใน indexedDB, ObjectStore คล้ายกับตารางฐานข้อมูล

 request.addeventListener ('upgradeneeded', ฟังก์ชั่น (เหตุการณ์) {// สร้างอินสแตนซ์ฐานข้อมูล const db = event.target.result; // ปิดฐานข้อมูล db.close (); // bkystorenames.contains (ObjectStorename); / ลบ ObjectStore DB.DeleteObjectStore (ObjectStorename);}, false);

คุณสามารถใช้วิธีการต่อไปนี้เพื่อสร้าง ObjectStore

 request.addeventListener ('upgradeneeded', ฟังก์ชั่น (เหตุการณ์) {// สร้างอินสแตนซ์ฐานข้อมูล const db = event.target.result; // พิจารณาว่ามี ObjectStore ถ้า (! db.objectstorenames. มี (ObjectStorEname) {const store = DB .CreateObjectStore (ObjectStorename, {keypath: KEYPATH // KEYPATH เป็นคำหลักในการค้นหาเป็น ObjectStore}); ดัชนีไม่ซ้ำกัน});}}, false);

 request.addeventListener ('ความสำเร็จ', ฟังก์ชั่น (เหตุการณ์) {// สร้างอินสแตนซ์ฐานข้อมูล const db = event.target.result; // ค้นหา ObjectStore db.Transaction (ObjectStorename, WA); // wa คือ 'readwrite' เมื่อข้อมูลสามารถอ่านและเขียน // เมื่อข้อมูลเป็น 'อ่านอย่างใหม่' ข้อมูลจะอ่านเฉพาะ const store = transaction.ObjectStore (ObjectStorename);}, false);

การเพิ่มฐานข้อมูลการลบและการเปลี่ยนแปลง:

 // เพิ่มข้อมูล Data Store.delete (ค่า) ที่สอดคล้องกับคำหลักที่ระบุ; ('ความสำเร็จ', ฟังก์ชั่น (เหตุการณ์) {// ฟังก์ชั่นการเรียกกลับ}, เท็จ);

ค้นหาข้อมูลตามดัชนี

 const index = store.index (indexname); const cursor = index.opencursor (ช่วง); Cursor.addeventListener ('ความสำเร็จ', ฟังก์ชั่น (เหตุการณ์) {const result = แม้แต่ t.target.result; ค่า // data result.continue ();

ค้นหาข้อมูลตามขอบเขตของดัชนี

 const index = store.index (indexname); const cursor = index.opencursor (ช่วง);/*** ช่วงเป็นโมฆะค้นหาข้อมูลทั้งหมดเป็นค่าที่ระบุค้นหาข้อมูลที่เกี่ยวข้องของดัชนีเพื่อให้ตรงกับเงื่อนไข* วัตถุ idbkeyrange เป็นข้อมูลของช่วงที่ระบุของช่วงที่ระบุของเงื่อนไขตามเงื่อนไข*/// ใหญ่กว่าหรือมากกว่าหรือเท่ากับช่วง = idbkeyrange.lowerbound (ค่าจริง) // (ค่า +, + ∞),> valuerange = idbkeyrange (ค่า, isopen) // มากกว่าหรือเท่ากับค่า 1, เล็กกว่าหรือเท่ากับ Value2idBkeyrange.bound (ค่า 1, value2, isopen1, isopen2)

ในที่สุดห้องสมุดของ IndexedDB จะถูกห่อหุ้มด้วยตัวเอง

ข้างต้นเป็นดัชนีของ HTML5 Local Storage ที่แนะนำโดย Xiaobian ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Vevb Wulin!