คำอธิบายโดยละเอียดเกี่ยวกับบทสรุปของวิธีการจัดเก็บข้อมูลหลายวิธีของ HTML5 ส่วนหน้า

สถานการณ์โดยรวม

ก่อน H5 จะใช้การจัดเก็บเป็นหลักกับคุกกี้ ข้อเสียของคุกกี้นั้นมีข้อมูลเกี่ยวกับหัวคำขอและขนาดอยู่ภายใน 4K ลอร์ดโดเมนมลพิษ

แอปพลิเคชันหลัก: ตะกร้าสินค้าการเข้าสู่ระบบลูกค้า

สำหรับเบราว์เซอร์ IE มี UserData ขนาดคือ 64K รองรับโดยเบราว์เซอร์ IE เท่านั้น

เป้า

1. แก้ปัญหา 4K
2. แก้ปัญหาส่วนหัวคำขอด้วยข้อมูลการจัดเก็บข้อมูล
3. ปัญหาการแก้ปัญหาการจัดเก็บเชิงสัมพันธ์
4. เบราว์เซอร์

1. พื้นที่เก็บข้อมูลท้องถิ่น LocalStorage

วิธีการจัดเก็บ:

การจัดเก็บในลักษณะคีย์-ค่าการจัดเก็บถาวรไม่เคยล้มเหลวเว้นแต่จะถูกลบด้วยตนเอง

ขนาด:

แต่ละโดเมนชื่อ 5m

สถานการณ์สนับสนุน:

หมายเหตุ: IE9 LocalStorage ไม่รองรับไฟล์ท้องถิ่น

วิธีการตรวจจับ:

 if (if (window.localstorage) {แจ้งเตือน ('เบราว์เซอร์นี้รองรับ localstorage');} else {Alert ('เบราว์เซอร์นี้ไม่รองรับ LocalStorage');}

API ทั่วไป:

getItem // ใช้บันทึก

SetItiten // บันทึกการตั้งค่า

removeItem // ลบบันทึก

คีย์ // ใช้ค่าที่สอดคล้องกับคีย์

ล้าง // ล้างบันทึก

เนื้อหาการจัดเก็บ:

อาร์เรย์รูปภาพ JSON สไตล์สคริปต์ แก่นแท้ แก่นแท้ (ตราบใดที่มันสามารถทำให้เป็นอนุกรมในเนื้อหาสตริงก็สามารถเก็บไว้ได้)

2. พื้นที่เก็บข้อมูลท้องถิ่น

LocalStorage ในพื้นที่เก็บข้อมูลท้องถิ่นของ HTML5 นั้นเหมือนกับ SessionStorage

3. แคชออฟไลน์ (แอปพลิเคชันแคช)

ไฟล์ที่จำเป็นสำหรับแอปพลิเคชันแคชท้องถิ่น

วิธีใช้:

①กำหนดค่าไฟล์รายการ

หน้าหนังสือ:

 <!

ไฟล์รายการ:

ไฟล์ Manifest เป็นไฟล์ข้อความง่าย ๆ ที่บอกเบราว์เซอร์ว่าเนื้อหาแคช (และเนื้อหาที่ไม่ได้แคช)

ไฟล์ Manifest สามารถแบ่งออกเป็นสามส่วน:

①แคชรายการ -ไฟล์ที่แสดงในชื่อนี้จะแคชหลังจากการดาวน์โหลดครั้งแรก

②Network -ไฟล์ที่แสดงภายใต้ชื่อนี้จำเป็นต้องเชื่อมต่อกับเซิร์ฟเวอร์โดยไม่ต้องแคช

③ทางเลือก -ไฟล์ที่ระบุไว้ในชื่อนี้กำหนดว่าหน้าของการล่าถอยเมื่อไม่สามารถเข้าถึงหน้าเว็บได้ (เช่นหน้า 404)

การสาธิตเต็มรูปแบบ:

 Cache Manifest# 2016-07-24 v1.0.0/theme.css/main.jsnetwork: login.jsp ทางเลือก: /html//offline.html

บนเซิร์ฟเวอร์: ไฟล์รายการจำเป็นต้องกำหนดค่าประเภท MIME ที่ถูกต้องนั่นคือข้อความ/แคช-manifest

เช่น Tomcat:

 <mime-mapping> <Entension> Manifest </EXTENSION> <MIME-type> ข้อความ/แคช-manifest </mime-ype> </mime-mapping >>

API ทั่วไป:

หลักคือวัตถุ ApplicationCache

0 (uncached): ไม่มีแคชนั่นคือไม่มีแคชแอปพลิเคชันที่เกี่ยวข้องกับหน้า

1 (ไม่ได้ใช้งาน): ไม่ได้ใช้งานนั่นคือแคชแอปพลิเคชันไม่ได้รับการอัปเดต

2 (การตรวจสอบ): ในระหว่างการตรวจสอบจะดาวน์โหลดไฟล์คำอธิบายและตรวจสอบการอัปเดต

3 (ดาวน์โหลด): ในการดาวน์โหลดแคชแอปพลิเคชันกำลังดาวน์โหลดทรัพยากรที่ระบุในไฟล์คำอธิบาย

4 (UpdaterEady): อัปเดตทรัพยากรทั้งหมดได้รับการดาวน์โหลด

5 (ไม่ได้ใช้งาน): ถูกทอดทิ้งนั่นคือไฟล์คำอธิบายของแอปพลิเคชันแคชไม่มีอยู่อีกต่อไปดังนั้นหน้าไม่สามารถเข้าถึงแคชแอปพลิเคชัน

เหตุการณ์ที่เกี่ยวข้อง:

ระบุการเปลี่ยนแปลงในแอปพลิเคชันของแอปพลิเคชันของสถานะแคช:

การตรวจสอบ: ทริกเกอร์เมื่อเบราว์เซอร์ค้นหาแคชแอปพลิเคชัน

ข้อผิดพลาด: ทริกเกอร์เมื่อส่งข้อผิดพลาดระหว่างการตรวจสอบหรือดาวน์โหลดทรัพยากร

Noupdate: ทริกเกอร์เมื่อตรวจสอบไฟล์คำอธิบายและพบว่าไฟล์ไม่เปลี่ยนแปลง

ดาวน์โหลด: ทริกเกอร์เมื่อดาวน์โหลดแอปพลิเคชันของทรัพยากรแคช

ความคืบหน้า: ทริกเกอร์อย่างต่อเนื่องในกระบวนการดาวน์โหลดไฟล์แอปพลิเคชันแคช

UpdaterEady: ดาวน์โหลดแคชแอปพลิเคชันใหม่บนหน้าทริกเกอร์

แคช: ทริกเกอร์เมื่อแคชแอปพลิเคชันเสร็จสมบูรณ์

ข้อดีสามประการของแอปพลิเคชันแคช:

①เรียกดูออฟไลน์

②เพิ่มความเร็วรายได้ใบหน้าของหน้า

③ลดความดันเซิร์ฟเวอร์

บันทึก:

1. ขีดจำกัดความจุของเบราว์เซอร์บนข้อมูลแคชอาจไม่เหมือนกัน (ข้อ จำกัด ที่กำหนดโดยเบราว์เซอร์บางตัวคือ 5MB ต่อไซต์)

2. หากไฟล์รายการหรือไฟล์ที่อยู่ภายในไม่สามารถดาวน์โหลดได้ตามปกติกระบวนการอัปเดตทั้งหมดจะถือเป็นความล้มเหลวและเบราว์เซอร์จะใช้แคชเก่าต่อไป

3. อ้างถึง HTML ของรายการจะต้องเหมือนกับไฟล์รายการภายใต้โดเมนเดียวกัน

4. เบราว์เซอร์จะแคชไฟล์ HTML ของไฟล์รายการโดยอัตโนมัติซึ่งทำให้เวอร์ชันการอัปเดตได้รับการอัปเดตหากเนื้อหา HTML มีการเปลี่ยนแปลง

5. แคชในไฟล์ Manifest ไม่มีส่วนเกี่ยวข้องกับเครือข่ายและทางเลือก

6. ทรัพยากรในทางเลือกจะต้องเหมือนกับไฟล์รายการ

7. หลังจากอัปเดตเวอร์ชันจะต้องรีเฟรชหนึ่งครั้งเพื่อเปิดเวอร์ชันใหม่ (สถานการณ์ของหน้าจะถูกแปรงครั้งเดียว) และต้องเพิ่มเวอร์ชันการตรวจสอบของเหตุการณ์

8. แม้ว่าหน้าอื่น ๆ ในไซต์จะไม่ได้ตั้งค่าทรัพยากรคำขอสามารถเข้าถึงได้จากแคชในแคช

9. เมื่อไฟล์ Manifest เปลี่ยนไปคำขอทรัพยากรเองจะทริกเกอร์การอัปเดต

ความแตกต่างระหว่างแคชออฟไลน์และแคชเบราว์เซอร์แบบดั้งเดิม:

1. แคชออฟไลน์สำหรับแอปพลิเคชันทั้งหมดแคชเบราว์เซอร์เป็นไฟล์เดียว

2. คุณสามารถเปิดหน้าหากคุณมีการขาดการเชื่อมต่อแคชออฟไลน์

3. แคชออฟไลน์สามารถแจ้งเบราว์เซอร์ให้อัปเดตทรัพยากรได้อย่างแข็งขัน

4. WEB SQL

ฐานข้อมูลเชิงสัมพันธ์การเข้าถึงผ่านคำสั่ง SQL

Web SQL Database API ไม่ได้เป็นส่วนหนึ่งของข้อกำหนด HTML5 แต่เป็นข้อกำหนดที่เป็นอิสระโดยแนะนำชุดของ API ที่ใช้ SQL เพื่อใช้งานฐานข้อมูลไคลเอนต์

สถานการณ์สนับสนุน:

ฐานข้อมูล Web SQL สามารถทำงานในเบราว์เซอร์ Safari, Chrome และ Opera เวอร์ชันล่าสุด

วิธีหลัก:

①Pendatabase: วิธีนี้ใช้ฐานข้อมูลที่มีอยู่หรือฐานข้อมูลใหม่เพื่อสร้างวัตถุฐานข้อมูล

transaction: วิธีนี้ช่วยให้เราสามารถควบคุมการทำธุรกรรมและดำเนินการส่งหรือย้อนกลับตามสถานการณ์นี้

③ ExecutesQL: วิธีนี้ใช้เพื่อดำเนินการสืบค้น SQL จริง

เปิดฐานข้อมูล:

 var db = opendatabase ('mydb', '1.0', 'ทดสอบ db', 2 * 1024 * 1024, fn); // opendatabase () 方法对应的五个参数分别为： 数据库名称、版本号、描述文本、 数据库名称、版本号、描述文本、 数据库名称、版本号、描述文本、 数据库名称、版本号、描述文本、 数据库名称、版本号、描述文本、 数据库名称、版本号、描述文本、 数据库名称、版本号、描述文本、 数据库名称、版本号、描述文本、：：：：：：：：：：：：：：： ขนาดฐานข้อมูลการสร้างการโทรกลับ

ดำเนินการแบบสอบถาม:

 var db = opendatabase ('mydb', '1.0', 'ทดสอบ db', 2 * 1024 * 1024);

แทรกข้อมูล:

 var db = opendatabase ('mydb', '1.0', 'ทดสอบ db', 2 * 1024 * 1024); 1, Winty) ');

อ่านข้อมูล:

 db.transaction (ฟังก์ชั่น (tx) {tx.executeql ('เลือก * จาก win', [], ฟังก์ชัน (tx, ผลลัพธ์) {var len = results.rows.length, msg = <p> หมายเลขบันทึกการสืบค้น: +len +</p>; }}, โมฆะ);});

จะเห็นได้จากการดำเนินการเหล่านี้ซึ่งโดยทั่วไปใช้คำสั่ง SQL เพื่อดำเนินการฐานข้อมูลที่เกี่ยวข้องกับฐานข้อมูล

5. IndexedDB

ฐานข้อมูลดัชนี (indexedB) API (เป็นส่วนหนึ่งของ HTML5) มีประโยชน์สำหรับการสร้างเว็บแอปพลิเคชัน HTML5 ออฟไลน์พร้อมข้อมูลที่เก็บข้อมูลที่เข้มข้น ในขณะเดียวกันก็ยังช่วยข้อมูลแคชท้องถิ่นเพื่อให้เว็บแอปพลิเคชันออนไลน์แบบดั้งเดิม (เช่นเว็บแอปพลิเคชันมือถือ) สามารถทำงานและตอบสนองได้เร็วขึ้น

API แบบอะซิงโครนัส:

การดำเนินการส่วนใหญ่ใน indexedDB ไม่ใช่วิธีการโทรที่ใช้กันทั่วไปของเราโดยส่งคืนผลลัพธ์ของผลลัพธ์ แต่โหมดของการตอบสนองการร้องขอเช่นการเปิดการดำเนินการฐานข้อมูล

ด้วยวิธีนี้เมื่อเราเปิดฐานข้อมูลเราส่งคืนวัตถุ DB จริง ๆ และวัตถุนี้ก็เป็นผล ดังที่เห็นได้จากรูปด้านบนยกเว้นผลลัพธ์ แอตทริบิวต์ที่สำคัญหลายประการ ได้แก่ onerror, onsuccess, onupgradeneeded (เมื่อเราขอหมายเลขเวอร์ชันของฐานข้อมูลและหมายเลขฐานข้อมูลที่มีอยู่ไม่สอดคล้องกัน) สิ่งนี้คล้ายกับคำขอ AJAX ของเรา หลังจากที่เราเริ่มคำขอนี้เราไม่สามารถระบุได้ว่าเมื่อใดที่ประสบความสำเร็จดังนั้นเราจึงต้องประมวลผลตรรกะบางอย่างในการโทรกลับ

ปิดและลบ:

 ฟังก์ชั่น clostb (db) {db.close ();} ฟังก์ชั่น deletedb (ชื่อ) {indexeddb.deletedatabase (ชื่อ);}

การจัดเก็บข้อมูล:

ไม่มีแนวคิดใน indexedDB แต่ ObjectStore กล่าวอีกนัยหนึ่ง ObjectStore เทียบเท่ากับตารางซึ่งเกี่ยวข้องกับข้อมูลแต่ละชิ้นที่เก็บไว้ในนั้น

เราสามารถใช้ฟิลด์ที่ระบุในแต่ละระเบียนเป็นค่าคีย์ (keypath) หรือใช้หมายเลขการสร้างอัตโนมัติเป็นค่าคีย์ (keygenRator) หรือไม่ได้ระบุ ประเภทที่แตกต่างกันของการเลือกคีย์โครงสร้างข้อมูลที่ ObjectStore สามารถจัดเก็บได้

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