ที่เก็บข้อมูลในเครื่อง การใช้ localStorage สำหรับ JavaScript ต้องใช้ที่เก็บข้อมูลในเครื่องของคุกกี้

นี่เป็นเทมเพลต HTML มาตรฐานที่เราเติมด้วยเนื้อหาที่สร้างขึ้นแบบไดนามิกโดยใช้ JavaScript

JavaScript

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

$ ("# เพิ่ม") คลิก (ฟังก์ชัน () (
// ถ้าช่องข้อความว่าง
$ ("# การแจ้งเตือน") html (" ความสนใจ!ป้อนรายการในข้อความ
สนาม.");
คืนค่าเท็จ;
}

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

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

// เพิ่มรายการลงในรายการที่มีอยู่
$ ("# todos") นำหน้า ("

อย่างที่คุณอาจสังเกตเห็น ไม่มีอะไรผิดปกติที่นี่ มันถูกใช้ รุ่นมาตรฐานรหัส jQuery ที่จุดเข้าถึงวัตถุ localStorage เราต้องระบุข้อมูลที่เรากำลังบันทึกในรูปแบบของคีย์ / ค่า สามารถใช้ชื่อใดก็ได้สำหรับคีย์ และฉันตั้งชื่อมันว่า "สิ่งที่ต้องทำ"จากนั้นเราต้องระบุสิ่งที่เราจำเป็นต้องเก็บไว้ในความทรงจำจริงๆ ในกรณีนี้ เป็นมาร์กอัป HTML ที่สมบูรณ์ ซึ่งรวมอยู่ในรายการแบบไม่เรียงลำดับ (อยู่ระหว่างแท็ก) ซึ่งแสดงรายการทั้งหมดที่ผู้ใช้ป้อนก่อนหน้านี้ จากโค้ด คุณจะเห็นว่าเราเพียงแค่ดึงแฟรกเมนต์ที่เราต้องการโดยใช้เมธอด jQuery .html () และในตอนท้าย หลังจากดำเนินการที่จำเป็นทั้งหมดเสร็จแล้ว เราจะตั้งค่าส่งคืนของฟังก์ชันเป็น false ซึ่งป้องกันฟอร์ม ข้อมูลจากการถูกส่งและดังนั้นการโหลดหน้าของเรา

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

// หากมีข้อมูลในที่จัดเก็บในตัวเครื่องอยู่แล้ว ให้แสดง

}

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

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

// การล้างข้อมูล localStorage แบบเต็ม
window.localStorage.clear ();
location.reload ();
คืนค่าเท็จ;
});

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

$ ("# เพิ่ม") คลิก (ฟังก์ชัน () (
var Description = $ ("# คำอธิบาย") val ();
ถ้า ($ ("# คำอธิบาย") val () == "") (
$ ("# การแจ้งเตือน") html (" ความสนใจ!ป้อนรายการใน
ช่องข้อความ.");
$ ("# alert") fadeIn (). ล่าช้า (1000) .fadeOut ();
คืนค่าเท็จ;
}
$ ("# todos") นำหน้า ("

ถ้า (localStorage.getItem ("todos")) (
$ ("# todos") html (localStorage.getItem ("todos"));
}

$ ("# clear") คลิก (ฟังก์ชัน () (
window.localStorage.clear ();
location.reload ();
คืนค่าเท็จ;
});

รองรับเบราว์เซอร์

ข้อกำหนด HTML5 ให้การสนับสนุนที่มีประสิทธิภาพมากสำหรับเทคโนโลยี Web Storage เนื่องจากเบราว์เซอร์ยอดนิยมส่วนใหญ่ใช้งานได้ แม้กระทั่ง IE8 IE7 ยังคงเป็นปัญหาเดียวหากคุณยังสนใจอยู่

บทสรุป.

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

* หมายเหตุนักแปล

โพสต์จำนวนการดู: 475

แปล: Vlad Merzhevich

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

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

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

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

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

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

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

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

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

ในปี 2545 Adobe ได้เปิดตัวฟีเจอร์ใน Flash 6 ซึ่งกลับกลายเป็นว่าโชคร้ายและมีชื่อที่ทำให้เข้าใจผิด - "Flash Cookies" ในสภาพแวดล้อม Flash ความสามารถนี้รู้จักกันดีในชื่อ Local Shared Objects (LSO) กล่าวโดยย่อ จะช่วยให้ออบเจ็กต์ Flash สามารถจัดเก็บข้อมูลได้สูงสุด 100KB ต่อโดเมน แบรด นอยเบิร์ก ผู้พัฒนาต้นแบบสะพานเชื่อมระหว่าง Flash และ JavaScript เรียกมันว่า AMASS (AJAX Massive Storage System) แต่ถูกจำกัดด้วยลักษณะเฉพาะบางประการของการออกแบบ Flash ภายในปี 2549 ด้วยการเปิดตัว ExternalInterface ใน Flash 8 การเข้าถึง LSO ผ่าน JavaScript ได้กลายเป็นลำดับความสำคัญที่ง่ายและรวดเร็วยิ่งขึ้น แบรดเขียน 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 () ด้วยคีย์ที่ไม่มีอยู่จะไม่ส่งคืนอะไรเลย

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

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

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

การติดตามพื้นที่จัดเก็บ HTML5

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

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

ถ้า (window.addEventListener) (
window.addEventListener ("ที่เก็บข้อมูล", handle_storage, เท็จ);
) อื่น (
window.attachEvent ("ontorage", 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" เป็นข้อยกเว้นที่คุณจะได้รับหากคุณใช้โควต้าเกิน 5MB "ไม่" คือคำตอบของคำถามที่ชัดเจนถัดไป: "ฉันขอพื้นที่เก็บข้อมูลเพิ่มจากผู้ใช้ได้ไหม" ในขณะที่เขียน เบราว์เซอร์ยังไม่ได้ใช้กลไกใดๆ สำหรับนักพัฒนาเว็บเพื่อขอพื้นที่เก็บข้อมูลเพิ่ม เบราว์เซอร์บางตัว (เช่น Opera) อนุญาตให้ผู้ใช้ควบคุมโควตาพื้นที่เก็บข้อมูลสำหรับแต่ละไซต์ แต่นี่เป็นความคิดริเริ่มสำหรับผู้ใช้เท่านั้น ไม่ใช่สิ่งที่คุณในฐานะนักพัฒนาสามารถฝังลงในเว็บแอปพลิเคชันของคุณได้

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

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

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

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

localStorage ["halma.game.in.progress"] = gGameInProgress;
สำหรับ (var i = 0; i< kNumPieces; i++) {
localStorage ["halma.piece" + i + ".row"] = gPieces [i] .row;
localStorage ["halma.piece" + i + ".column"] = gPieces [i] .column;
}
localStorage ["halma.selectedpiece"] = gSelectedPieceIndex;
localStorage ["halma.selectedpiecehasmoved"] = gSelectedPieceHasMoved;
localStorage ["halma.movecount"] = gMoveCount;
คืนค่าจริง;
}

อย่างที่คุณเห็น ออบเจ็กต์ localStorage ใช้เพื่อบันทึกกระบวนการเกม (gGameInProgress, บูลีน) ถัดไป โทเค็นทั้งหมด (gPieces, JavaScript array) จะถูกวนซ้ำและจัดเก็บแถวและคอลัมน์ไว้สำหรับแต่ละโทเค็น หลังจากนั้น สถานะเกมเพิ่มเติมบางส่วนจะถูกบันทึก รวมถึงชิ้นส่วนที่เลือก (gSelectedPieceIndex, integer) ชิ้นที่อยู่ตรงกลางของการกระโดดแบบยาว (gSelectedPieceHasMoved, boolean) และจำนวนการเคลื่อนไหวทั้งหมด (gMoveCount, integer) .

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

ฟังก์ชัน resumeGame () (
ถ้า (! supportLocalStorage ()) (คืนค่าเท็จ;)
gGameInProgress = (localStorage ["halma.game.in.progress"] == "จริง");
ถ้า (! gGameInProgress) (คืนค่าเท็จ;)
gPieces = อาร์เรย์ใหม่ (kNumPieces);
สำหรับ (var i = 0; i< kNumPieces; i++) {
var row = parseInt (localStorage ["halma.piece" + i + ".row"]);
var คอลัมน์ = parseInt (localStorage ["halma.piece" + i + ".column"]);
gPieces [i] = เซลล์ใหม่ (แถว, คอลัมน์);
}
gNumPieces = kNumPieces;
gSelectedPieceIndex = parseInt (localStorage ["halma.selectedpiece"]);
gSelectedPieceHasMoved = 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"]);

Beyond Key / Value Pair: วิสัยทัศน์การแข่งขัน

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

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

openDatabase ("เอกสาร", "1.0", "ที่จัดเก็บเอกสารในเครื่อง", 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 * จากผู้ใช้โดยที่ ACTIVE =" Y "" แต่จะใช้วิธีการที่ให้โดยที่เก็บอ็อบเจ็กต์เพื่อเปิดฐานข้อมูล USERS ระบุเรคคอร์ด กรองเรคคอร์ดของเรา และใช้เมธอด accessor เพื่อรับค่าของแต่ละฟิลด์ของเรคคอร์ดที่เหลือ การแนะนำ IndexedDB เบื้องต้นเป็นแนวทางที่ดีเกี่ยวกับวิธีการทำงานของ IndexedDB และเปรียบเทียบ IndexedDB กับ Web SQL

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

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