การจัดเก็บข้อมูลในท้องถิ่น การทำงานกับที่เก็บข้อมูลในตัวเครื่องใน JavaScript คุณควรทำอย่างไรต่อไป?

ที่ 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 ที่เกี่ยวข้องกับหัวข้อนี้โดยเฉพาะ

ฉันส่งบทความพร้อมเรื่องราวเกี่ยวกับ HTML5 LocalStorage ในเบราว์เซอร์ถึงคุณ เรามอบพื้นให้เขา

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

localStorage คืออะไร?

นี่คือลักษณะของวัตถุ JavaScript:

Var myCar = ( ล้อ: 4, ประตู: 4, เครื่องยนต์: 1, ชื่อ: "Jaguar" )

และนี่คือลักษณะของ JSON เกือบจะเหมือนกับวัตถุ js ทั่วไป เพียงคุณสมบัติทั้งหมดเท่านั้นที่ต้องอยู่ในเครื่องหมายคำพูด

( "firstName": "Ivan", "lastName": "Ivanov", "address": ( "streetAddress": "Moskovskoe sh., 101, apt. 101", "city": "Leningrad", "postalCode": 101101 ), "หมายเลขโทรศัพท์": [ "812 123-1234", "916 123-4567" ] )

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

ในแง่ JavaScript localStorage เป็นคุณสมบัติของวัตถุเบราว์เซอร์ส่วนกลาง (หน้าต่าง) สามารถเข้าถึงได้ในรูปแบบ window.localStorage หรือเพียงแค่ localStorage

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

มาดูกันสดๆเลย ตัวอย่างเช่นใน Google Chromeคุณต้องเปิด DevTools (F12) ไปที่แท็บ "ทรัพยากร" และในแผงด้านซ้ายคุณจะเห็น localStorage สำหรับโดเมนนี้และค่าทั้งหมดที่มีอยู่

อย่างไรก็ตาม คุณควรทราบว่า localStorage ทำงานอย่างไรกับโดเมน สำหรับแต่ละโดเมน เบราว์เซอร์ของคุณจะสร้างออบเจ็กต์ localStorage ของตัวเอง และสามารถแก้ไขหรือดูได้บนโดเมนนั้นเท่านั้น ตัวอย่างเช่น โดเมน mydomain-1.com ไม่สามารถเข้าถึง localStorage ของ mydomain-2.com ของคุณ

เหตุใดฉันจึงต้องมี localStorage?

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

ฉันจะเริ่มต้นใช้งาน localStorage ได้อย่างไร

ง่ายมาก.

การทำงานกับ localStorage นั้นคล้ายคลึงกับการทำงานกับอ็อบเจ็กต์ใน JavaScript มาก มีหลายวิธีในการทำงานกับมัน

localStorage.setItem("คีย์", "ค่า")

วิธีการที่เพิ่มใน localStorage รหัสใหม่ด้วยค่า (และหากมีคีย์ดังกล่าวอยู่แล้ว ก็จะเขียนทับด้วยค่าใหม่) เราเขียน เช่น localStorage.setItem('myKey', 'myValue');

localStorage.getItem("คีย์")

เราใช้ค่าเฉพาะจากที่เก็บข้อมูลคีย์

localStorage.removeItem("คีย์")

การถอดกุญแจ

localStorage.ชัดเจน()

กำลังล้างพื้นที่เก็บข้อมูลทั้งหมด

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

//เพิ่มหรือเปลี่ยนค่า: localStorage.setItem("myKey", "myValue"); // ตอนนี้คุณมีคีย์ "myKey" ที่มีค่า "myValue" เก็บไว้ใน localStorage // ส่งออกไปยังคอนโซล: var localValue = localStorage.getItem("myKey"); console.log(localValue); //"myValue" //remove: localStorage.removeItem("myKey"); //ล้างพื้นที่เก็บข้อมูลทั้งหมด localStorage.clear() สิ่งเดียวกันเฉพาะกับวงเล็บเหลี่ยม: localStorage["Key"] = "Value" //ตั้งค่า localStorage["Key"] //รับค่า ลบ localStorage[" คีย์"] // ลบค่า

ฉันอยากจะทราบด้วยว่า localStorage ใช้งานได้ดีกับโครงสร้างที่ซ้อนกัน เช่น ออบเจ็กต์

//สร้างวัตถุ var obj = ( item1: 1, item2: , item3:"hello" ); var serialObj = JSON.stringify(obj); //ทำให้เป็นอนุกรม localStorage.setItem("myKey", serialObj); // เขียนลงในที่เก็บข้อมูลโดยใช้คีย์ "myKey" var returnObj = JSON.parse(localStorage.getItem("myKey")) // แยกวิเคราะห์กลับเป็นวัตถุ

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

ลอง ( localStorage.setItem("key", "value"); ) catch (e) ( if (e == QUOTA_EXCEEDED_ERR) ( alert("เกินขีดจำกัด"); ) )

แทนที่จะได้ข้อสรุป

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

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

ที่จัดเก็บในเครื่องถาวรเป็นพื้นที่หนึ่งที่แอปพลิเคชันไคลเอนต์มีข้อได้เปรียบเหนือแอปพลิเคชันเซิร์ฟเวอร์ สำหรับการใช้งานเช่น ระบบปฏิบัติการจัดเตรียมเลเยอร์นามธรรมสำหรับจัดเก็บและเรียกข้อมูล เช่น การตั้งค่าหรือสถานะการดำเนินการ ค่าเหล่านี้อาจถูกจัดเก็บไว้ในรีจิสทรี, ไฟล์ 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 หรือไลบรารี JavaScript อื่นๆ เพื่อลงทะเบียนตัวจัดการเหตุการณ์ คุณสามารถทำได้โดยใช้พื้นที่เก็บข้อมูลด้วย

ถ้า (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 ซึ่งเป็นอาร์เรย์ JavaScript) จะถูกวนซ้ำ และบันทึกแถวและคอลัมน์ไว้สำหรับแต่ละส่วน จากนั้นสถานะของเกมเพิ่มเติมบางส่วนจะถูกบันทึก รวมถึงชิ้นส่วนที่เลือก (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 และ Google Chrome และแม้แต่ Microsoft ยังกล่าวว่า IndexedDB นั้นเป็น “โซลูชันที่ยอดเยี่ยมสำหรับเว็บ”

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

การแปลบทความ: วิธีใช้ที่จัดเก็บในตัวเครื่องสำหรับ JavaScript
ซาร่า วิเอร่า.

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

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

localStorage คืออะไร?

นี่เป็นกลไกการจัดเก็บข้อมูลในตัวเครื่องซึ่งเป็นส่วนหนึ่งของเทคโนโลยีการจัดเก็บข้อมูลเว็บที่จัดทำโดยข้อกำหนด HTML5 มีตัวเลือกการจัดเก็บข้อมูลสองตัวเลือกที่อนุญาตตามข้อกำหนดนี้:

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

พูดง่ายๆ ก็คือ Web Storage ทั้งหมดทำหน้าที่จัดเก็บข้อมูลในรูปแบบ ชื่อคีย์/ค่าในประเทศและต่างจากอีก 2 วิธี ซึ่งแต่ละวิธีก็มีข้อเสียของตัวเอง ( การจัดเก็บข้อมูลเซสชั่นเกี่ยวข้องกับการใช้ฝั่งเซิร์ฟเวอร์สำหรับสิ่งนี้ ยิ่งไปกว่านั้น หลังจากปิดเซสชันผู้ใช้ ข้อมูลนี้จะถูกลบ และคุกกี้ แม้ว่าคุกกี้จะใช้ฝั่งไคลเอ็นต์ในการจัดเก็บข้อมูล แต่ก็ไม่น่าเชื่อถือเนื่องจากผู้ใช้สามารถยกเลิกการสนับสนุนผ่านการตั้งค่าเบราว์เซอร์) บันทึกข้อมูลแม้ในกรณีนั้น หากคุณปิดเบราว์เซอร์หรือปิดคอมพิวเตอร์ ( *ข้าพเจ้าถือเสรีภาพในการเปลี่ยนแปลงและเพิ่มเนื้อหาในย่อหน้านี้เล็กน้อย เนื่องจากข้าพเจ้าเชื่อว่าผู้เขียนได้ทำความไม่ถูกต้องในต้นฉบับ)

HTML

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

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

ด้วยเหตุนี้ มาร์กอัปของเราจึงควรมีลักษณะดังนี้: