ที่เก็บข้อมูลในเครื่องของคุกกี้ ที่เก็บข้อมูลท้องถิ่น การดำเนินการ CRUD พื้นฐานพร้อมที่จัดเก็บในตัวเครื่อง

รีวิวเว็บพื้นที่จัดเก็บ

บนอินเทอร์เน็ต ข้อมูลสามารถเก็บไว้ในสองที่: บนเว็บเซิร์ฟเวอร์และบนเว็บไคลเอ็นต์ (เช่น คอมพิวเตอร์ของผู้เยี่ยมชมเพจ) ข้อมูลบางประเภทจะถูกจัดเก็บไว้ในที่ใดที่หนึ่งเหล่านี้อย่างดีที่สุด และประเภทอื่นๆ จะถูกเก็บไว้ในที่อื่น

สถานที่ที่เหมาะสมในการจัดเก็บข้อมูลที่เป็นความลับและสำคัญคือเว็บเซิร์ฟเวอร์ ตัวอย่างเช่น หากคุณเพิ่มสินค้าลงในรถเข็นช้อปปิ้งในร้านค้าออนไลน์ ข้อมูลเกี่ยวกับการซื้อที่เป็นไปได้ของคุณจะถูกเก็บไว้บนเว็บเซิร์ฟเวอร์ ข้อมูลการติดตามเพียงไม่กี่ไบต์ที่มีข้อมูลเกี่ยวกับคุณ (หรือมากกว่าเกี่ยวกับคอมพิวเตอร์ของคุณ) จะถูกจัดเก็บไว้ในคอมพิวเตอร์ของคุณ เพื่อให้เว็บเซิร์ฟเวอร์ทราบว่ารถเข็นคันไหนเป็นของคุณ แม้จะมีคุณสมบัติใหม่ของ HTML5 ก็ไม่จำเป็นต้องเปลี่ยนระบบนี้ - ระบบนี้มีความน่าเชื่อถือ ปลอดภัย และมีประสิทธิภาพ

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

ก่อน HTML5 วิธีเดียวเท่านั้นที่จัดเก็บข้อมูลในเครื่องใช้กลไกไฟล์ คุกกี้ซึ่งแต่เดิมได้รับการออกแบบมาเพื่อแลกเปลี่ยนข้อมูลระบุตัวตนจำนวนเล็กน้อยระหว่างเว็บเซิร์ฟเวอร์และเบราว์เซอร์ คุกกี้เหมาะอย่างยิ่งสำหรับการจัดเก็บข้อมูลจำนวนเล็กน้อย แต่โมเดล JavaScript สำหรับการทำงานกับคุกกี้นั้นค่อนข้างจะยุ่งยากเล็กน้อย ระบบคุกกี้ยังบังคับให้นักพัฒนาซอฟต์แวร์ต้องควานหาวันหมดอายุ และส่งข้อมูลกลับไปกลับมาทางอินเทอร์เน็ตโดยไม่จำเป็นตามคำขอแต่ละหน้า

ใน HTML5 มีการป้อน ทางเลือกที่ดีที่สุดคุกกี้ซึ่งช่วยให้คุณจัดเก็บข้อมูลบนคอมพิวเตอร์ของผู้เยี่ยมชมได้อย่างง่ายดายและง่ายดาย ข้อมูลนี้อาจจะถูกเก็บไว้ที่ คอมพิวเตอร์ไคลเอนต์จะไม่ถูกส่งไปยังเว็บเซิร์ฟเวอร์อย่างไม่มีกำหนด (เว้นแต่นักพัฒนาจะทำเอง) อาจมีขนาดใหญ่ และต้องใช้ออบเจ็กต์ JavaScript ที่เรียบง่ายและมีประสิทธิภาพเพียงไม่กี่รายการในการทำงานด้วย

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

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

ข้อมูลที่จัดเก็บไว้ในที่เก็บข้อมูลบนเว็บไม่ได้ถูกจัดเก็บไว้บนอินเทอร์เน็ตจริงๆ แต่อยู่ในคอมพิวเตอร์ของผู้เยี่ยมชมหน้าเว็บ กล่าวอีกนัยหนึ่ง ที่เก็บข้อมูลบนเว็บหมายถึงการจัดเก็บข้อมูลที่ไม่ได้อยู่บนอินเทอร์เน็ต แต่เป็นการจัดเก็บข้อมูลจากอินเทอร์เน็ต

ที่เก็บข้อมูลบนเว็บมีสองประเภทซึ่งเกี่ยวข้องกับสองออบเจ็กต์:

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

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

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

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

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

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

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

แม้ว่าข้อกำหนด HTML5 ไม่ได้กำหนดกฎที่เข้มงวดและรวดเร็วเกี่ยวกับพื้นที่เก็บข้อมูลสูงสุด แต่เบราว์เซอร์ส่วนใหญ่จะจำกัดไว้ที่ 5 MB คุณสามารถแพ็คข้อมูลจำนวนมากลงในวอลุ่มนี้ได้ แต่จะไม่เพียงพอหากคุณต้องการใช้ที่เก็บข้อมูลในตัวเครื่องเพื่อเพิ่มประสิทธิภาพการทำงานและแคชรูปภาพหรือวิดีโอจำนวนมากในนั้น (และจริงๆ แล้ว ที่เก็บข้อมูลในเครื่องไม่ได้ออกแบบมาสำหรับ วัตถุประสงค์ดังกล่าว)

สำหรับการจัดเก็บข้อมูลจำนวนมากซึ่งเป็นมาตรฐานฐานข้อมูลที่ยังคงมีการพัฒนา IndexedDBอนุญาตให้จัดเก็บข้อมูลในเครื่องในปริมาณที่มากขึ้น - โดยปกติแล้วจะเริ่มต้นที่ 50 MB และมากกว่านั้นหากผู้ใช้เห็นด้วย

กำลังบันทึกข้อมูล

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

ไวยากรณ์สำหรับการบันทึกชิ้นส่วนข้อมูลมีดังนี้:

localStorage = ข้อมูล;

// JS localStorage["ชื่อผู้ใช้"] = "อีวาน เปตรอฟ";

แน่นอนว่าการบันทึกส่วนของข้อความคงที่นั้นไม่สมเหตุสมผล โดยปกติแล้ว เราจำเป็นต้องจัดเก็บข้อมูลตัวแปรบางประเภท เช่น วันที่ปัจจุบัน ผลลัพธ์ของการคำนวณทางคณิตศาสตร์ หรือข้อมูลข้อความที่ผู้ใช้ป้อนลงในช่องแบบฟอร์ม ต่อไปนี้เป็นตัวอย่างของการบันทึกข้อมูลข้อความที่ผู้ใช้ป้อน:

ฟังก์ชั่น saveData() ( // รับค่าของฟิลด์ข้อความ var localData = document.getElementById("localData").value; var sessionData = document.getElementById("sessionData").value; // บันทึกข้อความที่ป้อน ในช่องข้อความลงในที่เก็บข้อมูลในเครื่อง localStorage["localData"] = localData; // บันทึกข้อความที่ป้อนลงในช่องข้อความลงในที่เก็บข้อมูลเซสชัน sessionStorage["sessionData"] = sessionData; loadData() ( // โหลดข้อมูลที่บันทึกไว้จาก ที่เก็บข้อมูล var localData = localStorage ["localData"]; var sessionData = sessionStorage["sessionData"]; // แสดงข้อมูลนี้ในช่องข้อความ if (localData != null) ( document.getElementById("localData").value = localData; ) ถ้า (sessionData ! = null) ( document.getElementById("sessionData").value = sessionData; ) )

หน้านี้ประกอบด้วยช่องข้อความสองช่อง: สำหรับที่จัดเก็บในเครื่อง (ที่ด้านบน) และสำหรับที่จัดเก็บเซสชัน (ที่ด้านล่าง) การคลิกปุ่ม "บันทึก" จะบันทึกข้อความที่ป้อนในช่องข้อความ และการคลิกปุ่ม "โหลด" จะแสดงข้อมูลที่บันทึกไว้ที่เกี่ยวข้องในฟิลด์

ที่เก็บข้อมูลบนเว็บยังรองรับไวยากรณ์คุณสมบัติทั่วไปที่น้อยกว่าอีกด้วย ตามกฎของไวยากรณ์นี้ เราจะอ้างถึงตำแหน่งพื้นที่เก็บข้อมูลที่ชื่อชื่อผู้ใช้เป็น localStorage.username แทนที่จะเป็น localStorage["username"] ไวยากรณ์ทั้งสองประเภทมีความเท่าเทียมกัน และการใช้อย่างใดอย่างหนึ่งเป็นเรื่องของการตั้งค่าส่วนบุคคล

ที่เก็บข้อมูลบนเว็บจะไม่ทำงานหากไม่มีเว็บเซิร์ฟเวอร์

ในการวิจัยพื้นที่เก็บข้อมูลเว็บของคุณ คุณอาจประสบปัญหาที่ไม่คาดคิด ในเบราว์เซอร์จำนวนมาก พื้นที่เก็บข้อมูลบนเว็บใช้งานได้กับเพจที่เว็บเซิร์ฟเวอร์จัดเตรียมไว้เท่านั้น ไม่สำคัญว่าเซิร์ฟเวอร์จะอยู่ที่ใด บนอินเทอร์เน็ตหรือบนคอมพิวเตอร์ของคุณเอง สิ่งที่สำคัญที่สุดก็คือเพจต่างๆ จะไม่ถูกเปิดจากท้องถิ่น ฮาร์ดไดรฟ์(ตัวอย่างเช่น, ดับเบิลคลิกตามไอคอนไฟล์เพจ)

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

แล้วจะเกิดอะไรขึ้นหากคุณเปิดเพจที่ใช้ที่เก็บข้อมูลเว็บจากฮาร์ดไดรฟ์ในเครื่องของคุณ ทุกอย่างขึ้นอยู่กับเบราว์เซอร์ อินเทอร์เน็ตเบราว์เซอร์ Explorer ดูเหมือนจะสูญเสียการสนับสนุนที่เก็บข้อมูลบนเว็บโดยสิ้นเชิง ออบเจ็กต์ localStorage และ sessionStorage หายไป และการพยายามใช้ทำให้เกิดข้อผิดพลาด JavaScript

ใน เบราว์เซอร์ไฟร์ฟอกซ์ออบเจ็กต์ localStorage และ sessionStorage ยังคงอยู่ในสถานที่และดูเหมือนว่าจะได้รับการสนับสนุน (แม้แต่ Modernizr ก็พิจารณาว่าได้รับการสนับสนุน) แต่ทุกสิ่งที่ส่งไปยังที่เก็บข้อมูลจะหายไปจากพระเจ้าที่รู้ว่าอยู่ที่ไหน ใน เบราว์เซอร์ Chromeมีบางอย่างที่แตกต่างออกไปอีกครั้ง - ฟังก์ชันการจัดเก็บข้อมูลบนเว็บส่วนใหญ่ทำงานได้ตามปกติ แต่ความสามารถบางอย่าง (เช่น เหตุการณ์ onStorage) ไม่ทำงาน

ปัญหาที่คล้ายกันเกิดขึ้นเมื่อใช้ File API ดังนั้น คุณจะช่วยลดความยุ่งยากได้มากหากคุณวางหน้าที่คุณกำลังทดสอบบนเซิร์ฟเวอร์ทดสอบเพื่อหลีกเลี่ยงความไม่แน่นอนเหล่านั้น

รองรับเบราว์เซอร์สำหรับการจัดเก็บเว็บ

ที่เก็บข้อมูลบนเว็บเป็นหนึ่งในคุณสมบัติที่ได้รับการสนับสนุนมากที่สุดของ HTML5 ด้วย ระดับดีรองรับเบราว์เซอร์หลักทุกตัว ตารางด้านล่างแสดงเวอร์ชันขั้นต่ำของเบราว์เซอร์หลักที่รองรับที่เก็บข้อมูลบนเว็บ:

เบราว์เซอร์เหล่านี้ทั้งหมดมีความสามารถในการจัดเก็บข้อมูลในเครื่องและความสามารถในการจัดเก็บข้อมูลเซสชัน แต่การรองรับเหตุการณ์ onStorage ต้องใช้เบราว์เซอร์เวอร์ชันใหม่กว่า เช่น IE 9, Firefox 4 หรือ Chrome 6

เวอร์ชันที่เป็นปัญหาที่สุดคือ IE 7 ซึ่งไม่รองรับที่เก็บข้อมูลบนเว็บเลย วิธีแก้ปัญหาชั่วคราวคือคุณสามารถจำลองพื้นที่เก็บข้อมูลบนเว็บโดยใช้คุกกี้ได้ มันไม่ใช่วิธีแก้ปัญหาที่สมบูรณ์แบบ แต่ก็ใช้งานได้ แม้ว่าจะไม่มีสคริปต์อย่างเป็นทางการสำหรับการปิดช่องว่างนี้ แต่จุดเริ่มต้นที่ดีบางส่วนสามารถพบได้ในหน้าเบราว์เซอร์ข้าม HTML5 (ใต้ "พื้นที่เก็บข้อมูลเว็บ")

ที่ API ที่เก็บข้อมูลเว็บจัดเตรียมกลไกที่เบราว์เซอร์สามารถจัดเก็บคู่คีย์/ค่าในลักษณะที่ใช้งานง่ายกว่าการใช้คุกกี้

แนวคิดและการใช้งานพื้นที่เก็บข้อมูลเว็บ

กลไกทั้งสองภายใน Web Storage มีดังนี้:

• sessionStorage รักษาพื้นที่เก็บข้อมูลแยกต่างหากสำหรับแต่ละต้นทางที่กำหนดซึ่งสามารถใช้ได้ตลอดระยะเวลาของเซสชันเพจ (ตราบใดที่เบราว์เซอร์เปิดอยู่ รวมถึงการรีโหลดและกู้คืนเพจ)
  • จัดเก็บข้อมูลเฉพาะเซสชัน ซึ่งหมายความว่าข้อมูลจะถูกเก็บไว้จนกว่าเบราว์เซอร์ (หรือแท็บ) จะปิด
  • ข้อมูลจะไม่ถูกถ่ายโอนไปยังเซิร์ฟเวอร์
  • ขีดจำกัดพื้นที่เก็บข้อมูลมีขนาดใหญ่กว่าคุกกี้ (สูงสุด 5MB)
• localStorage ทำสิ่งเดียวกัน แต่ยังคงอยู่แม้ว่าเบราว์เซอร์จะปิดและเปิดใหม่ก็ตาม
  • จัดเก็บข้อมูลโดยไม่มีวันหมดอายุ และล้างข้อมูลผ่าน JavaScript เท่านั้น หรือล้างแคชของเบราว์เซอร์ / ข้อมูลที่เก็บไว้ในเครื่อง
  • ขีดจำกัดพื้นที่เก็บข้อมูลเป็นค่าสูงสุดในสามข้อนี้

ข้อมูลจำเพาะ

ความเข้ากันได้ของเบราว์เซอร์

หน้าต่าง.localStorage

https://github.com/mdn/browser-compat-data และส่งคำขอดึงถึงเรา

ตำนาน

หน้าต่าง.SessionStorage

ตารางความเข้ากันได้ในหน้านี้สร้างขึ้นจากข้อมูลที่มีโครงสร้าง หากคุณต้องการมีส่วนร่วมในข้อมูล โปรดตรวจสอบ https://github.com/mdn/browser-compat-data และส่งคำขอดึงถึงเรา

อัปเดตข้อมูลความเข้ากันได้บน GitHub

ตำนาน

โหมดการท่องเว็บแบบส่วนตัว / ไม่ระบุตัวตน

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

เบราว์เซอร์ส่วนใหญ่เลือกใช้กลยุทธ์ที่ API การจัดเก็บข้อมูลยังคงมีอยู่และดูเหมือนว่าจะทำงานได้อย่างสมบูรณ์ โดยมีข้อแตกต่างสำคัญประการหนึ่งคือข้อมูลที่เก็บไว้ทั้งหมดจะถูกล้างหลังจากปิดเบราว์เซอร์ สำหรับเบราว์เซอร์เหล่านี้ ยังคงมีการตีความที่แตกต่างกันเกี่ยวกับสิ่งที่ควรทำกับข้อมูลที่เก็บไว้ที่มีอยู่ (จากเซสชันการเรียกดูปกติ) ควรจะอ่านได้เมื่ออยู่ในโหมดส่วนตัวหรือไม่? จากนั้นมีเบราว์เซอร์บางตัว โดยเฉพาะ Safari ที่เลือกใช้โซลูชันที่มีพื้นที่จัดเก็บข้อมูล แต่ว่างเปล่าและมีโควต้ากำหนดเป็น 0 ไบต์ ทำให้ไม่สามารถเขียนข้อมูลลงไปได้อย่างมีประสิทธิภาพ

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

การแปล: วลาด เมอร์เซวิช

ที่จัดเก็บในเครื่องถาวรเป็นพื้นที่หนึ่งที่แอปพลิเคชันไคลเอนต์มีข้อได้เปรียบเหนือแอปพลิเคชันเซิร์ฟเวอร์ สำหรับการใช้งานเช่น ระบบปฏิบัติการจัดเตรียมเลเยอร์นามธรรมสำหรับจัดเก็บและเรียกข้อมูล เช่น การตั้งค่าหรือสถานะการดำเนินการ ค่าเหล่านี้อาจถูกจัดเก็บไว้ในรีจิสทรี, ไฟล์ INI, ไฟล์ XML หรือที่อื่น ๆ ขึ้นอยู่กับหลักการของแพลตฟอร์ม หากแอปพลิเคชันไคลเอ็นต์ของคุณต้องการพื้นที่จัดเก็บในตัวเครื่องมากกว่าแค่คู่คีย์/ค่า คุณสามารถแทรกฐานข้อมูลของคุณเอง สร้างรูปแบบไฟล์ของคุณเอง หรือโซลูชันอื่นๆ มากมาย

ในอดีต เว็บแอปพลิเคชันไม่มีความฟุ่มเฟือยเหล่านี้เลย คุกกี้ถูกประดิษฐ์ขึ้นในช่วงต้นของประวัติศาสตร์อินเทอร์เน็ต และสามารถใช้เพื่อจัดเก็บข้อมูลจำนวนเล็กน้อยในเครื่องอย่างถาวร แต่พวกเขามีข้อเสียที่อาจเกิดขึ้นสามประการ:

• คุกกี้จะรวมอยู่ในคำขอ HTTP ทุกคำขอ ซึ่งจะทำให้เว็บแอปพลิเคชันของคุณช้าลงโดยการส่งข้อมูลเดิมซ้ำแล้วซ้ำอีกโดยไม่จำเป็น
• คุกกี้จะรวมอยู่ในทุกคำขอ HTTP เมื่อส่งข้อมูลผ่านอินเทอร์เน็ตในรูปแบบที่ไม่ได้เข้ารหัส (แม้ว่าเว็บแอปพลิเคชันทั้งหมดจะถูกส่งผ่าน SSL)
• คุกกี้ถูกจำกัดข้อมูลไว้ที่ประมาณ 4KB ซึ่งเพียงพอที่จะทำให้แอปพลิเคชันของคุณช้าลง (ดูด้านบน) แต่ไม่เพียงพอที่จะมีประโยชน์

นี่คือสิ่งที่เราต้องการจริงๆ:

• พื้นที่เก็บของมากมาย
• ทำงานบนฝั่งไคลเอ็นต์
• คำนึงถึงการรีเฟรชหน้าบัญชี
• ไม่มีการส่งไปยังเซิร์ฟเวอร์

ก่อน HTML5 ความพยายามทั้งหมดเพื่อให้บรรลุเป้าหมายนี้ล้มเหลวในท้ายที่สุดด้วยวิธีต่างๆ

ประวัติโดยย่อของการจัดเก็บในตัวเครื่องก่อน HTML5

ในตอนแรกมี Internet Explorer เพียงอันเดียว อย่างน้อยนั่นคือสิ่งที่ Microsoft ต้องการให้โลกคิด ด้วยเหตุนี้ภายในกรอบของข้อแรก มหาสงครามเบราว์เซอร์ Microsoft คิดค้นสิ่งต่างๆ มากมายและรวมไว้ในเบราว์เซอร์ที่สิ้นสุดสงคราม Internet Explorer หนึ่งในสิ่งเหล่านี้เรียกว่าพฤติกรรม DHTML และพฤติกรรมอย่างหนึ่งเรียกว่า userData

UserData อนุญาตให้หน้าเว็บจัดเก็บข้อมูลได้มากถึง 64 KB ต่อโดเมนในโครงสร้างคล้าย XML แบบลำดับชั้น โดเมนที่เชื่อถือได้ เช่น ไซต์อินทราเน็ตสามารถจัดเก็บได้มากกว่าสิบเท่า และนี่ 640 KB น่าจะเพียงพอสำหรับทุกคน IE ไม่ได้จัดเตรียมวิธีใดๆ ในการเปลี่ยนแปลงแบบแผนเหล่านี้ ดังนั้นจึงไม่มีทางที่จะเพิ่มจำนวนหน่วยความจำที่มีอยู่ได้

ในปี 2545 Adobe ได้เปิดตัวฟีเจอร์ใน Flash 6 ที่ไม่ประสบความสำเร็จและตั้งชื่อว่า "Flash Cookies" ซึ่งทำให้เข้าใจผิด ใน สภาพแวดล้อมแฟลชความสามารถนี้เป็นที่รู้จักอย่างถูกต้องมากขึ้นในชื่อ Local Shared Objects (LSO) กล่าวโดยย่อคือ ช่วยให้ออบเจ็กต์ Flash สามารถจัดเก็บข้อมูลได้มากถึง 100 KB ต่อโดเมน Brad Neuberg ผู้พัฒนาต้นแบบช่วงแรกๆ ของสะพานเชื่อมระหว่าง Flash และ JavaScript เรียกมันว่า AMASS (AJAX Massive Storage System) แต่ถูกจำกัดด้วยลักษณะเฉพาะบางประการของการออกแบบ Flash ภายในปี 2549 ด้วยการเปิดตัวอินเทอร์เฟซภายนอกใน Flash 8 การเข้าถึง LSO ผ่าน JavaScript กลายเป็นเรื่องสำคัญที่ง่ายและเร็วขึ้น Brad เขียน AMASS ใหม่และรวมเข้ากับ Dojo Toolkit ยอดนิยมภายใต้นามแฝง dojox.storage Flash ให้พื้นที่เก็บข้อมูล 100kb แต่ละโดเมน “ฟรี” นอกจากนี้ ยังเสนอให้ผู้ใช้เพิ่มปริมาณพื้นที่จัดเก็บข้อมูลตามลำดับความสำคัญ (1 MB, 10 MB เป็นต้น) เมื่อมีการร้องขอ

ถ้า (Modernizr.localstorage) (
// window.localStorage พร้อมใช้งานแล้ว!
) อื่น (
// ไม่มีการสนับสนุนดั้งเดิมสำหรับการจัดเก็บ HTML5
}

การใช้ที่เก็บข้อมูล HTML5

ที่เก็บข้อมูล HTML5 ขึ้นอยู่กับชื่อคู่คีย์/ค่า คุณจัดเก็บข้อมูลตามชื่อคีย์ จากนั้นคุณสามารถดึงข้อมูลนั้นด้วยคีย์เดียวกันได้ ชื่อคีย์คือสตริง ข้อมูลอาจเป็นประเภทใดก็ได้ที่ JavaScript รองรับ รวมถึงสตริง บูลีน จำนวนเต็ม หรือตัวเลขทศนิยม อย่างไรก็ตาม ในความเป็นจริงแล้วข้อมูลจะถูกจัดเก็บเป็นสตริง หากคุณกำลังจัดเก็บและดึงข้อมูลที่ไม่ใช่สตริง คุณจะต้องใช้ฟังก์ชันเช่น parseInt() หรือ parseFloat() เพื่อแปลงข้อมูลที่ได้รับให้เป็นประเภท JavaScript ที่ถูกต้อง

อินเตอร์เฟซการจัดเก็บ (
รับผ่าน getItem (คีย์);
ตั้งค่าผ่าน setItem(คีย์, ข้อมูล);
};

การเรียก setItem() ด้วยชื่อคีย์ที่มีอยู่จะเขียนทับค่าก่อนหน้าโดยไม่แจ้งให้ทราบ การเรียก getItem() ด้วยคีย์ที่ไม่มีอยู่จะส่งคืนค่า NULL แทนที่จะส่งข้อยกเว้น

เช่นเดียวกับอ็อบเจ็กต์ JavaScript อื่นๆ คุณสามารถเข้าถึงอ็อบเจ็กต์ localStorage เป็นอาร์เรย์ที่เชื่อมโยงได้ แทนที่จะใช้เมธอด getItem() และ setItem() คุณสามารถระบุได้ วงเล็บเหลี่ยม- ตัวอย่างเช่น ข้อมูลโค้ดนี้

var foo = localStorage.getItem("บาร์");
// ...
localStorage.setItem("บาร์", foo);

สามารถเขียนใหม่ได้โดยใช้ไวยากรณ์วงเล็บเหลี่ยม:

var foo = localStorage["บาร์"];
// ...
localStorage["บาร์"] = foo;

นอกจากนี้ยังมีวิธีการลบค่าตามชื่อคีย์รวมถึงการล้างร้านค้าทั้งหมด (นั่นคือการลบคีย์และค่าทั้งหมดพร้อมกัน)

อินเตอร์เฟซการจัดเก็บ (
ลบผ่าน RemoveItem(คีย์);
ชัดเจน();
}

การเรียก RemoveItem() ด้วยคีย์ที่ไม่มีอยู่จริงจะไม่ส่งคืนสิ่งใดเลย

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

อินเตอร์เฟซการจัดเก็บ (
ความยาว
รับรหัส (จำนวนเต็มไม่เป็นลบ);
}

หากเมื่อมีการเรียกใช้ key() ดัชนีไม่อยู่ในช่วงตั้งแต่ 0 ถึง (ความยาว -1) ฟังก์ชันจะส่งกลับค่า null

การตรวจสอบพื้นที่เก็บข้อมูล HTML5

หากคุณต้องการติดตามการเปลี่ยนแปลงพื้นที่เก็บข้อมูลโดยทางโปรแกรม คุณต้องติดตามเหตุการณ์พื้นที่เก็บข้อมูล เหตุการณ์นี้เกิดขึ้นบนวัตถุหน้าต่างเมื่อมีการเรียก setItem() , RemoveItem() หรือ clear() และทำการเปลี่ยนแปลงบางอย่าง เช่น หากคุณติดตั้ง มูลค่าที่มีอยู่หรือเรียกว่า clear() เมื่อไม่มีคีย์ เหตุการณ์จะไม่เริ่มทำงานเนื่องจากพื้นที่เก็บข้อมูลไม่ได้เปลี่ยนแปลงจริงๆ

เหตุการณ์การจัดเก็บข้อมูลได้รับการสนับสนุนทุกที่ที่วัตถุ localStorage ทำงาน รวมถึง Internet Explorer 8 IE 8 ไม่สนับสนุนมาตรฐาน W3C addEventListener (แม้ว่าในที่สุดจะถูกเพิ่มใน IE 9) ดังนั้นในการตรวจจับเหตุการณ์การจัดเก็บข้อมูลคุณต้องตรวจสอบว่ากลไกเหตุการณ์ใด รองรับเบราว์เซอร์ (หากคุณเคยทำสิ่งนี้มาก่อนกับกิจกรรมอื่น คุณสามารถข้ามไปยังส่วนท้ายของส่วนนี้ได้) การสกัดกั้นเหตุการณ์การจัดเก็บทำงานในลักษณะเดียวกับการสกัดกั้นเหตุการณ์อื่นๆ หากคุณต้องการใช้ jQuery หรืออื่นๆ ไลบรารีจาวาสคริปต์หากต้องการลงทะเบียนตัวจัดการเหตุการณ์ คุณสามารถทำได้โดยใช้พื้นที่เก็บข้อมูลด้วย

ถ้า (window.addEventListener) (
window.addEventListener("storage", handle_storage, false);
) อื่น (
window.attachEvent("onstorage", handle_storage);
};

การเรียกกลับ handle_storage จะถูกเรียกด้วยออบเจ็กต์ StorageEvent ยกเว้นใน Internet Explorer ซึ่งกิจกรรมจะถูกเก็บไว้ใน window.event

ฟังก์ชั่น handle_storage (e) (
ถ้า (!e) ( e = window.event; )
}

ในกรณีนี้ ตัวแปร e จะเป็นออบเจ็กต์ StorageEvent ซึ่งมีคุณสมบัติที่เป็นประโยชน์ดังต่อไปนี้

*หมายเหตุ: เดิมคุณสมบัติ url เรียกว่า uri และเบราว์เซอร์บางตัวรองรับคุณสมบัตินี้ก่อนที่ข้อกำหนดจะมีการเปลี่ยนแปลง เพื่อให้มั่นใจถึงความเข้ากันได้สูงสุด คุณควรตรวจสอบว่ามีคุณสมบัติ url อยู่หรือไม่ และหากไม่มี ให้ตรวจสอบคุณสมบัติ uri แทน

เหตุการณ์การจัดเก็บไม่สามารถยกเลิกได้ และไม่มีวิธีใดที่จะหยุดการเปลี่ยนแปลงภายในการโทรกลับ handle_storage มันเป็นเพียงวิธีการของเบราว์เซอร์ในการบอกคุณว่า “เฮ้ สิ่งนี้เพิ่งเกิดขึ้น คุณไม่สามารถทำอะไรได้ ฉันแค่อยากให้คุณรู้”

ข้อจำกัดในเบราว์เซอร์ปัจจุบัน

เมื่อพูดถึงประวัติการจัดเก็บในเครื่องโดยใช้ปลั๊กอินของบุคคลที่สาม ฉันได้กล่าวถึงข้อจำกัดของแต่ละเทคนิคแล้ว ฉันจำได้ว่าฉันไม่ได้พูดอะไรเกี่ยวกับข้อจำกัดของพื้นที่จัดเก็บ HTML5 มาตรฐานในปัจจุบัน ฉันจะให้คำตอบแก่คุณแล้วอธิบายให้พวกเขาฟัง คำตอบตามลำดับความสำคัญคือ "5 เมกะไบต์", "QUOTA_EXCEEDED_ERR" และ "ไม่มี"

“5 เมกะไบต์” - พื้นที่เก็บข้อมูลที่ให้ไว้เป็นค่าเริ่มต้น ค่านี้มีความสอดคล้องกันอย่างน่าประหลาดใจในทุกเบราว์เซอร์ แม้ว่าจะมีการระบุว่าเป็นเพียงคำแนะนำในข้อกำหนด HTML5 ก็ตาม คุณต้องเข้าใจว่าคุณกำลังจัดเก็บสตริง ไม่ใช่ข้อมูลในรูปแบบดั้งเดิม หากคุณเก็บจำนวนเต็มหรือตัวเลขทศนิยมจำนวนมาก ความแตกต่างในการแสดงอาจมีขนาดใหญ่ แต่ละหลักในตัวเลขทศนิยมจะถูกจัดเก็บเป็นอักขระ แทนที่จะจัดเก็บในรูปแบบปกติสำหรับตัวเลขดังกล่าว

"QUOTA_EXCEEDED_ERR" เป็นข้อยกเว้นที่คุณจะได้รับหากคุณใช้โควต้าเกิน 5 MB “ไม่” คือคำตอบของคำถามถัดไปที่ชัดเจน “ฉันขอพื้นที่เก็บข้อมูลเพิ่มจากผู้ใช้ได้ไหม” ในขณะที่เขียน เบราว์เซอร์ไม่ได้ใช้กลไกใดๆ สำหรับนักพัฒนาเว็บในการขอพื้นที่เก็บข้อมูลเพิ่มเติม เบราว์เซอร์บางตัว (เช่น Opera) อนุญาตให้ผู้ใช้ควบคุมโควต้าการจัดเก็บข้อมูลตามแต่ละไซต์ แต่นี่เป็นเพียงความคิดริเริ่มของผู้ใช้เท่านั้น และไม่เกี่ยวข้องกับสิ่งใด ๆ ที่คุณในฐานะนักพัฒนาสามารถสร้างลงในแอปพลิเคชันเว็บของคุณได้

ที่เก็บข้อมูล HTML5 ที่ใช้งานจริง

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

มันทำงานอย่างไร? ทุกครั้งที่มีการเปลี่ยนแปลงในเกมเราจะเรียกใช้ฟังก์ชันนี้

ฟังก์ชั่น saveGameState() (

localStorage["halma.game.in.progress"] = gGameInProgress;
สำหรับ (var i = 0; i< kNumPieces; i++) {
localStorage["halma.piece." + i + ".row"] = g Pieces[i].row;
localStorage["halma.piece." + i + ".column"] = g Pieces[i].column;
}
localStorage["halma.selectedpiece"] = gSelected PieceIndex;
localStorage["halma.selectedpiecehasmoved"] = gSelected PieceHasMoved;
localStorage["halma.movecount"] = gMoveCount;
กลับเป็นจริง;
}

อย่างที่คุณเห็น ออบเจ็กต์ localStorage ถูกใช้เพื่อบันทึกความคืบหน้าของเกม (gGameInProgress, ประเภทบูลีน) ถัดไป ชิ้นส่วนทั้งหมดจะถูกแยกออก (g Pieces, อาร์เรย์จาวาสคริปต์) และจัดเก็บแถวและคอลัมน์สำหรับแต่ละแถว จากนั้นสถานะของเกมเพิ่มเติมบางส่วนจะถูกบันทึก รวมถึงชิ้นส่วนที่เลือก (gSelected PieceIndex, จำนวนเต็ม) ชิ้นส่วนที่อยู่ตรงกลางของการกระโดดชุดยาว (gSelected PieceHasMoved, บูลีน) และ จำนวนทั้งหมดการเคลื่อนไหวที่ทำ (gMoveCount, จำนวนเต็ม)

เมื่อเพจโหลด แทนที่จะเรียกฟังก์ชัน newGame() โดยอัตโนมัติ ซึ่งจะคืนค่าตัวแปรทั้งหมดกลับเป็นค่าเดิม เราจะเรียก resumeGame() ฟังก์ชัน resumeGame() ใช้ที่เก็บข้อมูล HTML5 เพื่อตรวจสอบสถานะของเกมในที่จัดเก็บในตัวเครื่อง หากมีอยู่จะคืนค่าโดยใช้วัตถุ localStorage

ฟังก์ชั่น resumeGame() (
ถ้า (!supportsLocalStorage()) ( return false; )
gGameInProgress = (localStorage["halma.game.in.progress"] == "จริง");
ถ้า (!gGameInProgress) ( return false; )
g Pieces = อาร์เรย์ใหม่ (kNum Pieces);
สำหรับ (var i = 0; i< kNumPieces; i++) {
var row = parseInt(localStorage["halma.piece." + i + ".row"]);
คอลัมน์ var = parseInt(localStorage["halma.piece." + i + ".column"]);
g Pieces[i] = เซลล์ใหม่ (แถว, คอลัมน์);
}
gNumชิ้น = kNumชิ้น;
gSelected PieceIndex = parseInt (localStorage ["halma.selectedpiece"]);
gSelected PieceHasMoved = localStorage ["halma.selectedpiecehasmoved"] == "จริง";
gMoveCount = parseInt(localStorage["halma.movecount"]);
กระดานวาดภาพ();
กลับเป็นจริง;
}

ส่วนที่สำคัญที่สุดของคุณลักษณะนี้คือข้อแม้ที่ฉันกล่าวถึงก่อนหน้าในบทนี้ และจะทำซ้ำที่นี่: ข้อมูลถูกจัดเก็บเป็นสตริง หากคุณจัดเก็บอย่างอื่นที่ไม่ใช่สตริง คุณจะต้องแปลงสตริงเหล่านั้นเมื่อได้รับ ตัวอย่างเช่น แฟล็กที่เกมกำลังดำเนินการ (gGameInProgress) จะเป็นประเภทบูลีน ในฟังก์ชัน saveGameState() เราเพียงแค่จัดเก็บมันไว้และไม่ต้องกังวลกับประเภทข้อมูล

localStorage["halma.game.in.progress"] = gGameInProgress;

แต่ในฟังก์ชัน resumeGame() เราต้องดูค่าที่ดึงมาจากที่จัดเก็บในตัวเครื่องเป็นสตริง และสร้างค่าบูลีนของเราเองด้วยตนเอง

gGameInProgress = (localStorage["halma.game.in.progress"] == "จริง");

ในทำนองเดียวกัน จำนวนการเคลื่อนไหวจะถูกจัดเก็บไว้ใน gMoveCount เป็นจำนวนเต็ม ในฟังก์ชัน saveGameState() เราก็จะบันทึกมันไว้

localStorage["halma.movecount"] = gMoveCount;

แต่ในฟังก์ชัน resumeGame() เราต้องแปลงค่าเป็นจำนวนเต็มโดยใช้ฟังก์ชัน parseInt() ในตัวของ JavaScript

gMoveCount = parseInt(localStorage["halma.movecount"]);

เหนือกว่าคู่คีย์/ค่า: วิสัยทัศน์ในการแข่งขัน

แม้ว่าจะมีกลเม็ดและวิธีแก้ไขมากมายตลอดประวัติศาสตร์ แต่สถานะปัจจุบันของพื้นที่เก็บข้อมูล HTML5 นั้นมีประสิทธิภาพดีอย่างน่าประหลาดใจ API ใหม่ได้รับมาตรฐานและรวมอยู่ในเบราว์เซอร์ แพลตฟอร์ม และอุปกรณ์หลักๆ ทั้งหมด สำหรับนักพัฒนาเว็บ นั่นไม่ใช่สิ่งที่คุณเห็นทุกวันใช่ไหม แต่มันมีอะไรมากกว่า "คู่คีย์/ค่า 5 เมกะไบต์" และอนาคตของพื้นที่จัดเก็บในเครื่องแบบถาวรคือ... ฉันจะพูดอย่างไรดี... เอาล่ะ สมมติว่ามันเป็นวิสัยทัศน์เชิงแข่งขัน

นิมิตหนึ่งคือคำย่อที่คุณรู้อยู่แล้ว - SQL ในปี 2550 Google ได้เปิดตัว Gears ซึ่งเป็นปลั๊กอินโอเพ่นซอร์สข้ามเบราว์เซอร์ ซอร์สโค้ดซึ่งรวมถึงฐานข้อมูลที่ใช้ SQLite ในตัว ต้นแบบในยุคแรกนี้มีอิทธิพลต่อการสร้างข้อกำหนดฐานข้อมูล Web SQL ในภายหลัง ฐานข้อมูล Web SQL (เดิมชื่อ "WebDB") ทำหน้าที่เป็นตัวห่อหุ้มฐานข้อมูลแบบบาง ข้อมูล SQLซึ่งช่วยให้คุณทำสิ่งต่อไปนี้จาก JavaScript:

openDatabase("documents", "1.0", "Local document storage", 5*1024*1024, ฟังก์ชัน (db) (
db.changeVersion("", "1.0", ฟังก์ชัน (t) (
t.executeSql("สร้างเอกสารตาราง (id, ชื่อ)");
), ข้อผิดพลาด);
});

อย่างที่คุณเห็น การดำเนินการส่วนใหญ่จะสอดคล้องกับวิธี ExecuteSQL สตริงนี้สามารถรองรับคำสั่ง SQL ใดๆ รวมถึง SELECT, UPDATE, INSERT และ DELETE มันก็เป็นเช่นนั้น การเขียนโปรแกรมเซิร์ฟเวอร์ฐานข้อมูล ยกเว้นว่าคุณทำด้วย JavaScript! โอ้ความสุข!

ข้อกำหนดฐานข้อมูล Web SQL ได้รับการปรับใช้ในเบราว์เซอร์และแพลตฟอร์มสี่ตัว

แน่นอน หากคุณเคยใช้ฐานข้อมูลมากกว่าหนึ่งฐานข้อมูลในชีวิตของคุณ คุณจะรู้ว่า "SQL" เป็นศัพท์ทางการตลาดมากกว่ามาตรฐานที่ยากและรวดเร็ว (บางคนอาจพูดเหมือนกันเกี่ยวกับ HTML5 แต่นั่นไม่สำคัญ) . แน่นอนว่ามีข้อกำหนด SQL ในปัจจุบัน (เรียกว่า SQL-92) แต่ไม่มีเซิร์ฟเวอร์ฐานข้อมูลใดในโลกที่สอดคล้องกับข้อกำหนดนี้เท่านั้น มี Oracle SQL, Microsoft SQL, SQL ใน MySQL, SQL ใน PostgreSQL, SQL ใน SQLite ในความเป็นจริง แต่ละผลิตภัณฑ์เหล่านี้เพิ่มฟังก์ชัน SQL ใหม่เมื่อเวลาผ่านไป ดังนั้นแม้แต่การพูดว่า "SQL ใน SQLite" ยังไม่เพียงพอ คุณควรพูดว่า "เวอร์ชันของ SQL ที่มาพร้อมกับ SQLite เวอร์ชัน X.Y.Z"

ทั้งหมดนี้นำเราไปสู่ข้อจำกัดความรับผิดชอบถัดไป ซึ่งปัจจุบันโพสต์ไว้ที่ด้านบนสุดของข้อกำหนด Web SQL

ข้อมูลจำเพาะถึงทางตันแล้ว: นักพัฒนาที่สนใจทั้งหมดใช้ SQL ฝั่งเซิร์ฟเวอร์ (SQLite) แต่เราจำเป็นต้องมีการใช้งานอิสระหลายรายการเพื่อก้าวไปสู่การกำหนดมาตรฐาน ในขณะที่นักพัฒนารายอื่นสนใจที่จะนำข้อกำหนดนี้ไปใช้ คำอธิบายภาษา SQL นั้นเป็นเพียงการอ้างอิงถึง Sqlite เท่านั้น ซึ่งไม่เป็นที่ยอมรับสำหรับมาตรฐาน

ขัดกับภูมิหลังนี้ที่ฉันจะบอกคุณเกี่ยวกับวิสัยทัศน์การแข่งขันอีกประการหนึ่งสำหรับพื้นที่จัดเก็บในเครื่องขั้นสูงและถาวรสำหรับแอปพลิเคชันเว็บ: Indexed Database API ซึ่งเดิมเรียกว่า "WebSimpleDB" ซึ่งปัจจุบันเรียกว่า IndexedDB อย่างเสน่หา

Indexed Database API มอบสิ่งที่เรียกว่าพื้นที่จัดเก็บอ็อบเจ็กต์ โดยมีแนวคิดมากมายที่ยืมมาจากฐานข้อมูล SQL มี "ฐานข้อมูล" ที่มี "บันทึก" แต่ละบันทึกจะมี "ฟิลด์" จำนวนหนึ่ง แต่ละฟิลด์จะมีประเภทข้อมูลเฉพาะซึ่งจะถูกกำหนดเมื่อสร้างฐานข้อมูล คุณสามารถเลือกชุดย่อยของบันทึก จากนั้นแสดงรายการด้วย "เคอร์เซอร์" การเปลี่ยนแปลงที่เก็บอ็อบเจ็กต์จะถูกประมวลผลด้วย "ธุรกรรม"

หากคุณเคยเขียนโปรแกรมฐานข้อมูล SQL มาก่อน คุณอาจคุ้นเคยกับคำศัพท์เหล่านี้ ข้อแตกต่างที่สำคัญคือที่เก็บข้อมูลอ็อบเจ็กต์ไม่มีภาษาคิวรีที่มีโครงสร้าง คุณไม่ได้เขียนเงื่อนไขเช่น "SELECT * จาก USERS โดยที่ ACTIVE = "Y"" แต่เราใช้วิธีการที่ร้านค้าอ็อบเจ็กต์จัดเตรียมไว้ให้เพื่อเปิดฐานข้อมูล USERS แจกแจงบันทึก กรองบันทึกของเรา และใช้วิธีการเข้าถึงเพื่อรับค่าของแต่ละฟิลด์ของบันทึกที่เหลือ การแนะนำ IndexedDB เบื้องต้นเป็นบทช่วยสอนที่ดีเกี่ยวกับวิธีการทำงานของ IndexedDB และการเปรียบเทียบ IndexedDB กับ Web SQL

ในขณะที่เขียนนี้ IndexedDB ได้รับการปรับใช้ใน Firefox 4 เบต้าเท่านั้น ในทางตรงกันข้าม Mozilla ระบุว่าจะไม่ใช้ Web SQL Google ระบุว่าพวกเขากำลังพิจารณาการสนับสนุน IndexedDB สำหรับ Chromium และ กูเกิลโครม- และแม้แต่ Microsoft ยังกล่าวว่า IndexedDB นั้นเป็น “โซลูชันที่ยอดเยี่ยมสำหรับเว็บ”

คุณสามารถทำอะไรได้บ้างในฐานะนักพัฒนาเว็บด้วย IndexedDB บน ในขณะนี้แทบไม่มีอะไรเลยยกเว้นการสาธิตเทคโนโลยีบางอย่าง ในหนึ่งปี? อาจจะ.

อัปเดตครั้งล่าสุด: 11/11/2558

แม้ว่าคุกกี้จะอนุญาตให้คุณจัดเก็บข้อมูล แต่ก็มีข้อจำกัดบางประการ ตัวอย่างเช่น เบราว์เซอร์มีข้อจำกัดเกี่ยวกับขนาดของคุกกี้ - คุกกี้แต่ละตัวต้องไม่เกิน 4 KB คุกกี้มีวันหมดอายุหลังจากที่ถูกลบออกไป คุกกี้เป็นคุณสมบัติที่สำคัญของโปรโตคอล HTTP และจะถูกส่งไปพร้อมกับคำขอไปยังเซิร์ฟเวอร์พร้อมกับคำขอทุกครั้งไปยังเซิร์ฟเวอร์ อย่างไรก็ตาม สำหรับการทำงานกับคุกกี้บนฝั่งไคลเอ็นต์ในโค้ดจาวาสคริปต์ ไม่สำคัญว่าคุกกี้จะถูกส่งไปยังเซิร์ฟเวอร์หรือไม่ นอกจากนี้ หากต้องการดึงคุกกี้ที่เก็บไว้ คุณต้องเขียนโค้ดบางส่วน

ดังนั้นจึงมีการนำ HTML5 มาใช้ แนวคิดใหม่สำหรับการจัดเก็บข้อมูล-การจัดเก็บเว็บ ที่เก็บข้อมูลบนเว็บประกอบด้วยสององค์ประกอบ: ที่เก็บข้อมูลเซสชันและที่เก็บข้อมูลในเครื่อง

ที่เก็บข้อมูลเซสชันหมายถึงการจัดเก็บข้อมูลชั่วคราวที่ถูกลบหลังจากปิดเบราว์เซอร์

ที่จัดเก็บในเครื่องหมายถึงการจัดเก็บข้อมูลอย่างถาวร ข้อมูลจากที่จัดเก็บในตัวเครื่องจะไม่ถูกลบโดยอัตโนมัติและไม่มีวันหมดอายุ ข้อมูลนี้ไม่ถูกส่งไปยังเซิร์ฟเวอร์ในคำขอ HTTP นอกจากนี้ ปริมาณพื้นที่เก็บข้อมูลในเครื่องใน Chrome และ Firefox คือ 5 MB สำหรับโดเมน และใน IE - 10 MB

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

ในการทำงานกับที่จัดเก็บในตัวเครื่องด้วย javascript จะใช้วัตถุ localStorage และในการทำงานกับที่เก็บข้อมูลเซสชัน จะใช้วัตถุ sessionStorage

หากต้องการบันทึกข้อมูล คุณต้องส่งข้อมูลต่อไปนี้ไปยังเมธอด setItem() ของอ็อบเจ็กต์ localStorage:

LocalStorage.setItem("เข้าสู่ระบบ", " [ป้องกันอีเมล]");

วิธีการนี้ถูกส่งผ่านสองค่า: คีย์และค่าของวัตถุที่กำลังบันทึก

หาก localStorage มีออบเจ็กต์ที่มีคีย์ "login" อยู่แล้ว ค่าของมันจะถูกแทนที่ด้วยอันใหม่

หากต้องการรับข้อมูลที่บันทึกไว้ คุณต้องเรียกใช้เมธอด getItem() ดังนี้

เข้าสู่ระบบ Var = localStorage.getItem("เข้าสู่ระบบ"); - [ป้องกันอีเมล]

คีย์วัตถุถูกส่งผ่านไปยังวิธีนี้

หากต้องการลบวัตถุออก ให้ใช้เมธอด RemoveItem() ซึ่งจะนำคีย์ของวัตถุออก:

LocalStorage.removeItem("เข้าสู่ระบบ");

และสำหรับ การกำจัดที่สมบูรณ์ของออบเจ็กต์ทั้งหมดจาก localStorage คุณสามารถใช้เมธอด clear() ได้:

LocalStorage.ชัดเจน();

การบันทึกออบเจ็กต์แบบธรรมดานั้นง่าย แต่เราต้องคำนึงว่าข้อมูลใน localStorage จะถูกบันทึกเป็นสตริง:

LocalStorage.setItem("อายุ", 23); อายุ var = localStorage.getItem("อายุ"); อายุ=parseInt(อายุ)+10; document.write(อายุ); //33

เว้นแต่คุณจะแปลงค่าเป็นตัวเลขโดยใช้ parseInt() ในกรณีนี้ อายุจะทำหน้าที่เป็นสตริง

อาจเกิดปัญหากับการบันทึกวัตถุที่ซับซ้อน:

ผู้ใช้ Var =( ชื่อ: "ทอม" อายุ: 23 แต่งงาน: false ); localStorage.setItem("ผู้ใช้", ผู้ใช้); var SavedUser = localStorage.getItem("ผู้ใช้"); document.write(ผู้ใช้ที่บันทึกไว้); // document.write(savedUser.name); // undefinition - saveUser เป็นสตริง ไม่ใช่อ็อบเจ็กต์

ในกรณีนี้ เราจำเป็นต้องใช้การทำให้เป็นอนุกรมในรูปแบบ JSON:

ผู้ใช้ Var =( ชื่อ: "ทอม" อายุ: 23 แต่งงาน: false ); localStorage.setItem("ผู้ใช้", JSON.stringify(ผู้ใช้)); var SavedUser = JSON.parse(localStorage.getItem("ผู้ใช้")); document.write(savedUser.name + " " + saveUser.age +" " + saveUser.married); //ทอม 23 เท็จ