การจัดเก็บข้อมูลบนไคลเอนต์สามารถแก้ปัญหาได้มากมายและลดการส่งข้อมูลที่ไม่จำเป็น:
1. สามารถบันทึกสถานะของโปรแกรม: ผู้ใช้สามารถรู้ได้ว่าเขาทำงานที่ไหนหลังจากปิดเบราว์เซอร์และเปิด
2. สามารถแคชข้อมูล: ไม่จำเป็นต้องได้รับข้อมูลจำนวนมากที่จะไม่เปลี่ยนแปลงจากเซิร์ฟเวอร์ทุกครั้ง
3. สามารถบันทึกการตั้งค่าของผู้ใช้: ข้อมูลประเภทนี้มักไม่จำเป็นต้องอยู่บนเซิร์ฟเวอร์
แนวทางปฏิบัติก่อนหน้านี้ก่อนที่ HTML5 Local Storage หากเราต้องการบันทึกข้อมูลถาวรบนไคลเอนต์มีหลายตัวเลือก:
1. คุกกี้ HTTP ข้อเสียของคุกกี้ HTTP นั้นชัดเจน พวกเขาสามารถจัดเก็บข้อมูลได้สูงสุด 4KB และคำขอ HTTP แต่ละรายการจะถูกส่งกลับไปยังเซิร์ฟเวอร์และส่งข้อความธรรมดา (เว้นแต่คุณจะใช้ SSL)
2. เช่น UserData UserData เป็นโซลูชันการจัดเก็บในท้องถิ่นที่เปิดตัวโดย Microsoft ในช่วงสงครามเบราว์เซอร์ในปี 1990 มันใช้แอตทริบิวต์พฤติกรรมของ DHTML เพื่อจัดเก็บข้อมูลในพื้นที่ช่วยให้แต่ละหน้าสามารถจัดเก็บข้อมูลได้สูงสุด 64K และข้อมูลสูงสุด 640K ต่อไซต์ ข้อเสียของ UserData นั้นชัดเจน มันไม่ได้เป็นส่วนหนึ่งของมาตรฐานเว็บ เว้นแต่ว่าโปรแกรมของคุณจะต้องสนับสนุน IE เท่านั้นมันก็ไร้ประโยชน์
3. คุกกี้แฟลช คุกกี้แฟลชนั้นไม่เหมือนกับคุกกี้ HTTP บางทีชื่อของมันควรจะเป็นที่เก็บข้อมูลในพื้นที่ คุกกี้แฟลชอนุญาตให้แต่ละไซต์จัดเก็บข้อมูลไม่เกิน 100k โดยค่าเริ่มต้น หากเกินกว่านั้นแฟลชจะขอพื้นที่เก็บข้อมูลขนาดใหญ่จากผู้ใช้โดยอัตโนมัติ ด้วยอินเทอร์เฟซ ExternalInterface ของ Flash คุณสามารถใช้งานที่เก็บข้อมูลท้องถิ่นของ Flash ผ่าน JavaScript ได้อย่างง่ายดาย ปัญหาเกี่ยวกับแฟลชนั้นง่ายมากเพราะเป็นแฟลช
4. Google Gears Gears เป็นปลั๊กอินของเบราว์เซอร์โอเพนซอร์สที่เปิดตัวโดย Google ในปี 2550 โดยมีวัตถุประสงค์เพื่อปรับปรุงความเข้ากันได้ของเบราว์เซอร์ที่สำคัญ Gears มีฐานข้อมูล SQL แบบฝังตัวในตัวตาม SQLite และให้ API Unified เพื่อเข้าถึงฐานข้อมูล หลังจากได้รับการอนุญาตจากผู้ใช้แต่ละไซต์สามารถจัดเก็บข้อมูลที่ไม่ จำกัด ในฐานข้อมูล SQL ปัญหาของ Gears คือ Google เองไม่ได้ใช้มันอีกต่อไป
ความหลากหลายของเทคโนโลยีที่น่าตื่นตานำไปสู่ปัญหาความเข้ากันได้ของเบราว์เซอร์ คุกกี้ที่พบบ่อยที่สุดที่นี่อาจเป็นคุกกี้
ประสบการณ์ใหม่ใน HTML5ในการตอบสนองต่อปัญหาข้างต้น HTML5 เป็นวิธีแก้ปัญหาที่เหมาะกว่า: หากคุณต้องการจัดเก็บข้อมูลที่สามารถแก้ไขได้ง่ายๆโดยใช้คู่คีย์/ค่าคุณสามารถใช้ที่เก็บข้อมูลเว็บ
เมื่อเทียบกับคุกกี้เว็บที่เก็บข้อมูลมีข้อดีหลายประการสรุปดังนี้:
1. พื้นที่เก็บข้อมูลขนาดใหญ่: พื้นที่เก็บข้อมูลอิสระแต่ละแห่งภายใต้ IE8 คือ 10 ม. และเบราว์เซอร์อื่น ๆ มีการใช้งานที่แตกต่างกันเล็กน้อย แต่มีขนาดใหญ่กว่าคุกกี้มาก
2. เนื้อหาที่เก็บไว้จะไม่ถูกส่งไปยังเซิร์ฟเวอร์: เมื่อมีการตั้งค่าคุกกี้เนื้อหาของคุกกี้จะถูกส่งพร้อมกับคำขอบนเซิร์ฟเวอร์ซึ่งเป็นการเสียแบนด์วิดท์สำหรับข้อมูลที่เก็บไว้ในพื้นที่ ข้อมูลในการจัดเก็บเว็บมีอยู่ในเครื่องเท่านั้นและจะไม่โต้ตอบกับเซิร์ฟเวอร์
3. อินเทอร์เฟซที่สมบูรณ์และใช้งานง่ายมากขึ้น: Web Storage ให้ชุดอินเทอร์เฟซที่สมบูรณ์ยิ่งขึ้นทำให้การทำงานของข้อมูลง่ายขึ้น
4. พื้นที่จัดเก็บอิสระ: แต่ละโดเมน (รวมถึงโดเมนย่อย) มีพื้นที่เก็บข้อมูลอิสระและพื้นที่จัดเก็บแต่ละพื้นที่มีความเป็นอิสระอย่างสมบูรณ์ดังนั้นจะไม่ทำให้เกิดความสับสน
การจำแนกประเภทการจัดเก็บเว็บที่เก็บข้อมูลเว็บจริง ๆ แล้วประกอบด้วยสองส่วน: SessionStorage และ LocalStorage
SessionStorage ใช้เพื่อจัดเก็บข้อมูลในเซสชันในพื้นที่ซึ่งสามารถเข้าถึงได้ในหน้าเว็บในเซสชันเดียวกันและข้อมูลจะถูกทำลายหลังจากเซสชันเสร็จสิ้น ดังนั้น SessionStorage จึงไม่ได้เป็นที่เก็บข้อมูลในพื้นที่ถาวร แต่มีเพียงการจัดเก็บระดับเซสชัน
LocalStorage ใช้สำหรับที่เก็บข้อมูลในพื้นที่ถาวรและข้อมูลจะไม่หมดอายุเว้นแต่จะถูกลบอย่างแข็งขัน
ตรวจสอบว่ารองรับการจัดเก็บเว็บหรือไม่การจัดเก็บเว็บได้รับการสนับสนุนในเบราว์เซอร์หลักที่สำคัญ แต่เพื่อให้เข้ากันได้กับเบราว์เซอร์เก่าเรายังต้องตรวจสอบว่าสามารถใช้เทคโนโลยีนี้ได้หรือไม่
วิธีแรก: ตรวจสอบว่าเบราว์เซอร์รองรับการจัดเก็บเว็บหรือไม่โดยตรวจสอบว่าวัตถุจัดเก็บข้อมูลมีอยู่:
if (typeof (storage)! == "undefined") {
// ใช่! การสนับสนุน LocalStorage และ SessionStorage!
// บางรหัส ...
} อื่น {
// ขอโทษ! ไม่มีการรองรับการจัดเก็บเว็บ ..
-
วิธีที่สองคือการตรวจสอบวัตถุที่เกี่ยวข้องแยกต่างหากเช่นการตรวจสอบว่า LocalStorage รองรับหรือไม่:
if (typeof (localstorage) == 'undefined') {
การแจ้งเตือน ('เบราว์เซอร์ของคุณไม่รองรับ HTML5 LocalStorage ลองอัพเกรด');
} อื่น {
// ใช่! การสนับสนุน LocalStorage และ SessionStorage!
// บางรหัส ...
-
หรือ:
if ('localstorage' ในหน้าต่าง && window ['localstorage']! == null) {
// ใช่! การสนับสนุน LocalStorage และ SessionStorage!
// บางรหัส ...
} อื่น {
การแจ้งเตือน ('เบราว์เซอร์ของคุณไม่รองรับ HTML5 LocalStorage ลองอัพเกรด');
-
หรือ
ถ้า (!! localstorage) {
// ใช่! การสนับสนุน LocalStorage และ SessionStorage!
// บางรหัส ...
} อื่น {
การแจ้งเตือน ('เบราว์เซอร์ของคุณไม่รองรับ HTML5 LocalStorage ลองอัพเกรด');
-
เห็นได้ชัดว่าวิธีแรกคือโดยตรงและง่ายที่สุด
ใช้การจัดเก็บเว็บWeb Storage เก็บคู่คีย์-ค่าและเบราว์เซอร์เก็บไว้เป็นสตริง อย่าลืมแปลงเป็นรูปแบบอื่น ๆ เมื่อจำเป็น
ยกเว้นการใช้งานที่แตกต่างกันของ SessionStorage และ LocalStorage รายการสมาชิกจะเหมือนกัน:
key = value: จัดเก็บคู่ค่าคีย์
setItem (คีย์, ค่า): บันทึกคู่คีย์-ค่า
getItem (คีย์): รับคู่คีย์ค่า
removeItem (คีย์): ลบคู่คีย์ทั้งหมด
Clear (): ล้างคู่คีย์ทั้งหมด
ความยาว: จำนวนคู่คีย์-ค่า
ที่นี่เรายังคงต้องเน้น: ประเภทค่าในวิธีการ setitem (คีย์, ค่า) ในทางทฤษฎีสามารถเป็นประเภทใดก็ได้ แต่ในความเป็นจริงเบราว์เซอร์จะเรียกวิธีการ toString ค่าเพื่อให้ได้ค่าสตริงและเก็บไว้ในเครื่อง ดังนั้นหากเป็นประเภทที่กำหนดเองคุณต้องกำหนดวิธีการ toString ที่มีความหมายด้วยตัวเอง ตัวอย่างเช่นตัวอย่างต่อไปนี้ใช้ร่วมกับ json.stringify:
var person = {'name': 'Rainman', 'อายุ': 24};
localstorage.setItem ("Me", json.stringify (บุคคล));
json.parse (localstorage.getItem ('me')) ชื่อ; // 'Rainman'
-
* json.stringify แปลงข้อมูล JSON เป็นสตริง
* json.stringify ({'ชื่อ': 'Fred', 'อายุ': 24}); // '{"ชื่อ": "เฟร็ด", "อายุ": 24}'
* json.stringify (['a', 'b', 'c']); // '["A", "B", "C"]'
* json.parse, ต่อต้านการแก้ปัญหา json.stringify
* json.parse ('["A", "B", "C"]') // ["A", "B", "C"]
-
นอกจากนี้เมื่อเพิ่มคู่คีย์-ค่าหากจำนวนเพิ่มมีขนาดใหญ่จะปลอดภัยกว่าที่จะตรวจสอบว่ามีข้อยกเว้นใด ๆ ที่เกินขีด จำกัด :
พยายาม {
localstorage.setItem (itemid, value.oin (';'));
} catch (e) {
if (e == quota_exceeded_err) {
การแจ้งเตือน ('โควต้าเกิน!');
-
-
วิธีการจัดเก็บเว็บนั้นง่ายมาก ตัวอย่างต่อไปนี้คือการนับจำนวนคลิกบนปุ่ม:
<! doctype html>
<html>
<head>
<script>
ฟังก์ชั่น clickcounter ()
-
if (typeof (storage)! == "undefined")
-
if (localstorage.clickcount)
-
localstorage.clickcount = number (localstorage.clickcount) +1;
-
อื่น
-
LocalStorage.ClickCount = 1;
-
document.getElementById ("ผลลัพธ์"). innerhtml = "คุณได้คลิกปุ่ม" + localstorage.clickcount + "เวลา";
-
อื่น
-
document.getElementById ("ผลลัพธ์"). innerhtml = "ขออภัยเบราว์เซอร์ของคุณไม่รองรับการจัดเก็บเว็บ ... ";
-
-
</script>
</head>
<body>
<p> <button onclick = "clickcounter ()" type = "ปุ่ม"> คลิกฉัน! </button> </p>
<div id = "ผลลัพธ์"> </div>
<p> คลิกปุ่มเพื่อดูตัวนับเพิ่ม </p>
<p> ปิดแท็บเบราว์เซอร์ (หรือหน้าต่าง) แล้วลองอีกครั้งและตัวนับจะนับต่อไป (ไม่ได้รีเซ็ต) </p>
</body>
</html>
ในตัวอย่างด้านบนคุณสามารถเปลี่ยน LocalStorage เป็น SessionStorage คลิกที่ปุ่มหลายครั้งและตรวจสอบเอฟเฟกต์ก่อนและหลังปิดเบราว์เซอร์
ปัญหาที่มีอยู่ข้อบกพร่องของการจัดเก็บเว็บส่วนใหญ่มีความเข้มข้นในความปลอดภัยซึ่งสะท้อนให้เห็นในสองจุดต่อไปนี้:
1. เบราว์เซอร์จะจัดสรรพื้นที่เก็บข้อมูลอิสระสำหรับแต่ละโดเมนนั่นคือสคริปต์ไม่สามารถเข้าถึงพื้นที่เก็บข้อมูลในโดเมน B ในโดเมน A แต่เบราว์เซอร์จะไม่ตรวจสอบว่าโดเมนที่สคริปต์นั้นอยู่เหมือนกับโดเมนปัจจุบันหรือไม่ นั่นคือสคริปต์ที่ฝังอยู่ในโดเมน A ในโดเมน B ยังสามารถเข้าถึงข้อมูลในโดเมน B.
2. ข้อมูลที่เก็บไว้ในเครื่องไม่ได้เข้ารหัสและจะไม่มีวันหมดอายุซึ่งง่ายมากที่จะทำให้เกิดการรั่วไหลของความเป็นส่วนตัว
นอกจากนี้สำหรับปัญหาที่เกี่ยวข้องกับความปลอดภัยเพิ่มเติมโปรดดูลิงค์ในการอ้างอิงที่เป็นประโยชน์ในภายหลัง
รายการข้อมูลจำเพาะอื่น ๆ (เพื่อความเข้าใจเท่านั้นอาจจะหายไปได้ตลอดเวลา)ฐานข้อมูลเว็บ
ในข้อเสนอ HTML5 เก่าหากคุณต้องการจัดเก็บข้อมูลที่ซับซ้อนคุณสามารถใช้ฐานข้อมูลเว็บซึ่งสามารถใช้ SQL เช่นโปรแกรมไคลเอนต์ (มาตรฐานฐานข้อมูลเว็บถูกยกเลิกดังนั้นนี่คือการกล่าวถึงสั้น ๆ ); GlobalStorageสิ่งนี้ยังเสนอใน HTML5 หลังจากปิดเบราว์เซอร์ข้อมูลที่เก็บไว้โดยใช้ GlobalStorage ยังคงสามารถเก็บไว้ได้ เช่นเดียวกับ LocalStorage ข้อมูลที่เก็บไว้ในหน้าใดก็ได้ในโดเมนสามารถแชร์ได้โดยทุกหน้า แต่ปัจจุบัน Firefox รองรับเท่านั้น
ไวยากรณ์พื้นฐาน:
• GlobalStorage ['Developer.mozilla.org'] - โดเมนย่อยทั้งหมดภายใต้ Developer.mozilla.org สามารถอ่านและเขียนผ่านวัตถุจัดเก็บข้อมูลเนมสเปซนี้
• GlobalStorage ['mozilla.org'] - เว็บเพจทั้งหมดภายใต้ชื่อโดเมน mozilla.org สามารถอ่านและเขียนผ่านวัตถุที่เก็บข้อมูลเนมสเปซนี้
• GlobalStorage ['org'] - หน้าเว็บทั้งหมดภายใต้ชื่อโดเมน. ORG สามารถอ่านและเขียนผ่านวัตถุที่เก็บข้อมูลเนมสเปซนี้
• GlobalStorage [''] - หน้าเว็บใด ๆ ภายใต้ชื่อโดเมนใด ๆ สามารถอ่านและเขียนผ่านวัตถุที่เก็บข้อมูลเนมสเปซนี้
คุณสมบัติวิธี:
• setItem (คีย์, ค่า) - ตั้งค่าหรือรีเซ็ตค่าคีย์
• getItem (คีย์) - รับค่าคีย์
• removeItem (คีย์) - ลบค่าคีย์
•ตั้งค่าคีย์ค่า: window.globalstorage [planabc.net] .key = value;
•รับค่าคีย์: value = window.globalstorage [planabc.net] .key;
คุณสมบัติอื่น ๆ :
•เวลาหมดอายุเหมือนกับการจัดเก็บข้อมูลในพื้นที่และคุณสมบัติอื่น ๆ ก็คล้ายกับ LocalStorage
• Firefox รองรับการจัดเก็บ GlobalStorage เท่านั้นภายใต้โดเมนปัจจุบัน การใช้โดเมนทั่วไปจะทำให้รหัสข้อผิดพลาดความปลอดภัยข้อผิดพลาดที่คล้ายกัน: 1,000
indexedDBในที่สุดเราต้องการแนะนำ indexedDB เมื่อเปรียบเทียบกับข้อกำหนดอื่นอีกสองรายการเท่านั้น Firefox ในปัจจุบันใช้งาน IndexEdDB (โดยวิธีการที่ Mozilla กล่าวว่าพวกเขาจะไม่ใช้ฐานข้อมูล Web SQL) แต่ Google ได้กล่าวว่ากำลังพิจารณาเพิ่มการสนับสนุน ENDICDB ลงใน Chrome
IndexedDB แนะนำแนวคิดของ Object Store ซึ่งเป็นเหมือนฐานข้อมูล SQL ที่คุณสามารถเก็บบันทึกในฐานข้อมูลและแต่ละระเบียนสามารถมีฟิลด์จำนวนมากแต่ละฟิลด์มีประเภทข้อมูลเฉพาะคุณสามารถเลือกชุดย่อยของบันทึกและข้ามด้วยเคอร์เซอร์
สำหรับข้อมูลเพิ่มเติมโปรดดูเอกสารเกี่ยวกับ indexedDB ใน Firefox ในการอ้างอิงการใช้งานในภายหลัง
การอ้างอิงเชิงปฏิบัติ:เอกสารอย่างเป็นทางการ: http://www.w3schools.com/html5/
ความกังวลเทมเพลต: http://www.cuoxin.com/w3school/html5/
ความปลอดภัยของพื้นที่เก็บข้อมูลในท้องถิ่น: http://www.mhtml5.com/2012/03/4586.html
คุณสมบัติการทดลองของ Firefox IndexedDB: https://developer.mozilla.org/en-us/docs/indexeddb