RAID HTML5: JavaScript API Extension 3 - ประสบการณ์ใหม่ในการจัดเก็บในท้องถิ่น

การจัดเก็บข้อมูลบนไคลเอนต์สามารถแก้ปัญหาได้มากมายและลดการส่งข้อมูลที่ไม่จำเป็น:

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

เมื่อเทียบกับคุกกี้เว็บที่เก็บข้อมูลมีข้อดีหลายประการสรุปดังนี้:

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 เช่นโปรแกรมไคลเอนต์ (มาตรฐานฐานข้อมูลเว็บถูกยกเลิกดังนั้นนี่คือการกล่าวถึงสั้น ๆ );

สิ่งนี้ยังเสนอใน 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 เมื่อเปรียบเทียบกับข้อกำหนดอื่นอีกสองรายการเท่านั้น 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