การวิเคราะห์พื้นที่เก็บข้อมูลบนเว็บอย่างเต็มรูปแบบ

การพัฒนา เว็บ แอปพลิเคชันได้นำไปสู่การใช้พื้นที่เก็บข้อมูลฝั่งไคลเอ็นต์เพิ่มมากขึ้น และมีวิธีต่างๆ มากมายในการใช้พื้นที่เก็บข้อมูลฝั่งไคลเอ็นต์ วิธีแก้ปัญหาที่ง่ายที่สุดและเข้ากันได้มากที่สุดคือ Cookie แต่ในฐานะที่จัดเก็บข้อมูลฝั่งไคลเอ็นต์จริง Cookie มีข้อบกพร่องร้ายแรงมากมาย นอกจากนี้ userData Behavior ยังสามารถใช้ได้ใน IE6 ขึ้นไป, globalStorage สามารถใช้กับ Firefox และ Flash Local Storage สามารถใช้ในสภาพแวดล้อมที่มีปลั๊กอิน Flash อย่างไรก็ตาม วิธีการเหล่านี้ล้วนมีข้อจำกัดด้านความเข้ากันได้ ดังนั้นจึงไม่เป็นเช่นนั้นจริงๆ เหมาะที่จะใช้ เพื่อตอบสนองต่อสถานการณ์ข้างต้น HTML5 มอบวิธีแก้ปัญหาที่เหมาะสมกว่า: หากคุณต้องการจัดเก็บข้อมูลที่ซับซ้อน คุณสามารถใช้ Web Database และคุณสามารถใช้ SQL ได้เหมือนกับโปรแกรมไคลเอนต์ (แต่มาตรฐาน Web Database อยู่ในภาวะชะงักงัน และ ในปัจจุบัน เบราว์เซอร์ที่ถูกนำมาใช้มีจำกัดมาก) หากคุณต้องการเก็บข้อมูลที่สามารถแก้ไขได้ง่ายๆ ด้วยคู่คีย์/ค่า คุณสามารถใช้ Web Storage ได้ บทความนี้จะแนะนำสถานการณ์เฉพาะของ Web Storage จากแง่มุมต่างๆ เป็นหลัก

sessionStorage และ localStorage

Web Storage จริงๆ แล้วประกอบด้วยสองส่วน: sessionStorage และ localStorage

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

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

เหตุใดจึงเลือกพื้นที่เก็บข้อมูลเว็บมากกว่าคุกกี้

เมื่อเปรียบเทียบกับคุกกี้แล้ว Web Storage มีข้อดีหลายประการ โดยสรุปได้ดังนี้

1. พื้นที่เก็บข้อมูลขนาดใหญ่ขึ้น: พื้นที่เก็บข้อมูลอิสระแต่ละแห่งภายใต้ IE8 คือ 10M การใช้งานเบราว์เซอร์อื่นจะแตกต่างกันเล็กน้อย แต่มีขนาดใหญ่กว่าคุกกี้มาก

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

3. อินเทอร์เฟซที่สมบูรณ์ยิ่งขึ้นและใช้งานง่าย: Web Storage มีชุดอินเทอร์เฟซที่สมบูรณ์ยิ่งขึ้น ทำให้การทำงานของข้อมูลง่ายขึ้น

4. พื้นที่เก็บข้อมูลอิสระ: แต่ละโดเมน (รวมถึงโดเมนย่อย) มีพื้นที่เก็บข้อมูลอิสระ แต่ละพื้นที่เก็บข้อมูลเป็นอิสระอย่างสมบูรณ์ ดังนั้นจะไม่มีความสับสนของข้อมูล

ความเข้ากันได้เป็นอย่างไร?

การทดสอบต่างๆ ต่อไปนี้ดำเนินการในเบราว์เซอร์ต่อไปนี้: IE8, Firefox3.6, Chrome5, Safari4, Opera10 ปรากฎว่าการใช้งาน API ในแต่ละเบราว์เซอร์โดยพื้นฐานแล้วจะเหมือนกัน และมีปัญหาความเข้ากันได้บางประการ แต่ก็ไม่เป็นเช่นนั้น ส่งผลต่อการใช้งานปกติ

การทดสอบการจัดเก็บเซสชั่น

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

ตารางที่ 1 การทดสอบความเข้ากันได้ของ sessionStorage

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