Offline Storage in the Era of HTML5

HTML 5 มี Offline Storage (บางครั้งเรียกว่า HTML5 Storage) ให้เราใช้งานดังนี้ Web Storage (บางครั้งเรียกว่า Local Storage หรือ DOM Storage), Web SQL Database, IndexedDB และ File Storage ซึ่งในทุกกรณีที่กล่าวมาทั้งหมดสามารถ Access ได้เฉพาะ Application ที่อยู่ภายใต้ Domain เดียวกัน ตามกฎ Same Origin Policy

WEB STORAGE

Web Storage จะเก็บในลักษณะ key-value อย่างเช่น เวลาต้องการบันทึกค่า เราก็จะใช้ localStorage["score"] = 37 ส่วนเวลาที่จะดึงค่ากลับออกมาก็จะใช้ score = localStorage["score"] ค่า Value ที่ใช้เก็บ จะเป็น String เท่านั้น ถ้าจะใช้เก็บข้อมูลชนิดอื่น อย่างเช่น Array จะต้องทำการ Serialize ให้เป็น String ก่อนแล้วถึงเก็บลงใน Web Storage สำหรับการ Serialize นั้น เราสามารถใช้ JSON.stringify(value) ส่วนการ Deserialize นั้น เราสามารถใช้ JSON.parse(serialized_string)

Web Storage มีให้ใช้งาน 2 รูปแบบ คือ localStorage และ sessionStorage โดยข้อมูล sessionStorage จะถูกลบ เมื่อปิด Browser ในขณะที่ localStorage จะยังอยู่

แหล่งที่มา: http://www.html5rocks.com/en/tutorials/offline/whats-offline/

WEB SQL DATABASE

HTML5 สามารถเรียกใช้งาน SQLite Database ที่ฝั่ง Client Side ได้ ซึ่งจะช่วยให้เรา สามารถใช้ SQL ใน Front-End เพื่อ Query ข้อมูลจาก SQLite Database ได้

INDEXEDDB

เป็นรูปแบบที่ Compromise ระหว่าง Web Storage และ Web SQL Database คือมีการใช้งานในลักษณะ Key-Value เหมือน Web Storage แต่ในขณะเดียวกันเรายังสามารถเลือกทำ Index ในบาง Field ที่เราต้องการ ทำให้เราสามารถ Query Field ที่ทำการ Index ไว้ได้

FILESYSTEM API

FileSystem API ช่วยให้เราสามารถสร้าง Files, Folders ภายใต้ Sandbox ของ Application ได้ ใช้สำหรับในกรณีที่เราต้องการเก็บ File หรือ Data Structure ขนาดใหญ่ๆ

แหล่งที่มา: http://www.html5rocks.com/en/tutorials/offline/whats-offline/