Tags:
Node Thumbnail

HTML5 ประกอบด้วยเทคโนโลยีหลายส่วน เช่น แท็กแบบใหม่ๆ, audio/video, canvas, geolocation ฯลฯ ส่วนประกอบหนึ่งที่สำคัญไม่น้อยแต่คนไม่ค่อยพูดถึงเท่าไรคือความสามารถของ "เว็บเพจ" (หรืออาจเรียกมันว่าเป็น "เว็บแอพพลิเคชัน" ก็ได้) ในการเก็บข้อมูลแบบออฟไลน์ ซึ่งก็แยกย่อยได้อีกหลายชนิดมาก (HTML4 เก็บได้เฉพาะคุกกี้เล็กๆ นิดเดียว)

เว็บไซต์ InfoWorld สรุปมาสั้นๆ ดี ผมเลยมาสรุปอีกทีให้สั้นกว่าเดิม เพื่อคนที่สนใจ HTML5 จะไปตามต่อได้ถูกครับ

Web Storage

เทคโนโลยีแรกคือ Web Storage ซึ่งเป็นการเก็บข้อมูลแบบง่ายๆ ในรูป key-value (ภาษาโปรแกรมบางภาษาเรียก dictionary) ซึ่งแยกย่อยได้อีก 2 อย่าง คือ

  • Session storage เก็บข้อมูลเฉพาะเซสชันการท่องเว็บนั้นๆ ปิดแท็บเมื่อไรข้อมูลก็หายไป ใช้ออบเจคต์ชนิด sessionStorage อันนี้ไม่ซับซ้อน
  • Local storage เก็บข้อมูลระยะยาว (persistence) โดยใช้ออบเจคต์ชื่อ localStorage ซึ่งจะซับซ้อนขึ้น เพราะเราสามารถเปิดเว็บเพจเดียวกันใน 2 แท็บหรือมากกว่า ซึ่งมันจะแชร์ข้อมูลก้อนเดียวกัน

ฟีเจอร์ Web Storage จะคล้ายกับ Google Gears เมื่อ 3-4 ปีก่อนหน้านี้ เพียงแต่ Web Storage รวมมากับ HTML5 เลย ไม่ต้องลงปลั๊กอินเพิ่มเองแบบ Gears

ฐานข้อมูล

การเก็บข้อมูลง่ายๆ แบบ key-value อาจไม่เพียงพอต่อความต้องการของนักพัฒนา HTML5 จึงเพิ่มวิธีการเก็บข้อมูลที่ซับซ้อนขึ้นมา ซึ่งก็คือฐานข้อมูลแบบที่เราคุ้นเคยนั่นเอง

ปัญหาของฐานข้อมูลใน HTML5 ก็คือมาตรฐานที่แยกเป็นสองทาง

  • Web SQL Database มันคือการนำ SQL มายัดใส่เบราว์เซอร์ (ส่วนมากนิยม SQLite) ตอนนี้ใช้ได้แค่เบราว์เซอร์ตระกูล WebKit และ Opera แนวทางนี้มีข้อเสียตรงความซับซ้อนของ SQL และเริ่มหมดความนิยมแล้ว (ทั้งที่มาตรฐานยังไม่เสร็จ)
  • IndexedDB แนวทางใหม่ที่สร้างขึ้นในภายหลัง ไม่ใช้ SQL แต่เก็บข้อมูลแบบ key-value เหมือนกับ Web Storage เพียงแต่เพิ่มการทำดัชนี (index) ช่วยให้หาข้อมูลได้รวดเร็วขึ้น และเพิ่มเรื่อง transactions เพื่อความปลอดภัยของข้อมูลมาด้วย

Blognone เคยลงเรื่อง Web SQL vs IndexedDB ไปครั้งหนึ่งแล้ว ย้อนอ่านรายละเอียดได้ในตอนเก่าครับ

File API

เราพูดถึงการเก็บข้อมูลแบบง่ายๆ และการเก็บลงฐานข้อมูลไปแล้ว ลำดับถัดไปคือการจัดการกับ "ไฟล์" นั่นเอง HTML5 มี API มาให้เราสองตัวคือ FileReader กับ FileWriter หน้าที่ก็ตามชื่อครับ

ปัญหาของ FileReader ที่จะต้องสนใจคือความแตกต่างระหว่างไฟล์ที่อยู่ในเครื่อง กับไฟล์ที่อยู่บนเว็บ ซึ่งกำลังพัฒนากันอยู่

ส่วน FileWriter มีข้อกังวลเรื่องความปลอดภัย เพราะต่อจากนี้ไปเว็บเพจจะสามารถเขียนไฟล์ในเครื่องเราได้ มาตรการแก้ไขจุดอ่อนนี้ก็ต้องพัฒนากันต่อไป

แคชสำหรับเวลาออฟไลน์

เมื่อเว็บแอพพลิเคชันไม่ได้ต่อเน็ต ก็ต้องมีวิธีจัดการกับข้อมูลที่เกิดขึ้นระหว่างนั้น ซึ่งเป็นหน้าที่ของ AppCaching API ที่บอกว่าเว็บแอพพลิเคชันจะถูกเก็บไว้บนเครื่องนานแค่ไหน ทำให้เว็บแอพมีลักษณะคล้ายๆ กับแอพที่ติดตั้งแบบปกติมากขึ้น

รายละเอียดของวิธีการเก็บข้อมูลแต่ละชนิด ไปตามต่อกันใน HTML5 Tutorial กันเองนะครับ

ที่มา - InfoWorld

Get latest news from Blognone

Comments

By: lingjaidee
ContributoriPhoneAndroid
on 24 January 2011 - 18:45 #253421
lingjaidee's picture

จะดีเกินไปแล้วนะเนี่ย .. ชักดูน่ากลัว ^^'


my blog

By: HMage
AndroidWindows
on 24 January 2011 - 19:03 #253425

อ่านดูแล้วเหมือนเว็บแอพพลิเคชันจะคืนสู่สามัญ กลับไปเป็นแอพพลิเคชันธรรมดา
ต่างกันแค่สามารถแจกให้แต่ละเครื่องใช้ได้ทันทีที่ต้องการ ไม่ต้องออกไปหาซื้อหรือรอดาวน์โหลดเป็นวันๆ


Hello Blognone.

By: takz1977
iPhoneUbuntu
on 24 January 2011 - 19:05 #253428
takz1977's picture

เหมือน หรือแตกต่าง หรือคนละเรื่องกันกับ nosql ครับ


ψ(`∇´)ψ

By: way_cs16
ContributorWindows PhoneAndroidBlackberry
on 24 January 2011 - 19:46 #253436 Reply to:253428
way_cs16's picture

คนละเรื่องเลยครับ
NoSql ก็คือฐานข้อมูลบนเซิร์ฟเวอร์ ที่มีวิธีจัดเก็บข้อมูลใหม่ ลด ชนิดข้อมูล ตัดคำสั่ง insert update delete select ทิ้ง อาศัยเร้วเท่านั้น

แต่ตามบทความนี้คือ ทำไงเราจะเก็บไฟล์บนไคล์เอนท์แล้วยังใช้งานเว็บแอพพลีเคชันได้เหมือนเดิมโดย ไม่ต้องส่ง Request post get กลับไปที่เซิร์ฟเวอร์ อาศัย javascript กับ html5 นี่แหละ เขียนไฟล์ลงบนเครื่อง client ได้เลย

By: PaPaSEK
ContributorAndroidWindowsIn Love
on 24 January 2011 - 19:56 #253439 Reply to:253428
PaPaSEK's picture

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

แต่จะว่าไปเราเห็นว่าสนุก คนอื่นก็อาจไม่คิดแบบนั้นเนอะ -_-"

By: PaPaSEK
ContributorAndroidWindowsIn Love
on 24 January 2011 - 19:37 #253433
PaPaSEK's picture

อ่านแล้วทำให้คิดว่า Browser ก็ต้องมีความรอบคอบมากขึ้นด้วยในหลายๆ ด้าน
ไม่งั้นอะไรที่เก็บไว้ในส่วน Local Storage ก็คงถูกดึงออกไปได้จากช่องโหว่

ยิ่งเว็บ//เทคโนโลยีมันฉลาดมากขึ้น ผมคิดว่าช่องโหว่มันก็ยิ่งมากขึ้นตามไปด้วย

By: takz1977
iPhoneUbuntu
on 24 January 2011 - 20:10 #253442 Reply to:253433
takz1977's picture

กำลังจะเริ่มอ่านครับ http://html5tutorial.net/

ปล.นอกเรื่อง-กำลังนั่งมองบอทเกมส์ของเฟซบุ๊คเกมส์หนึ่งที่ใช้ SQLite


ψ(`∇´)ψ

By: PaPaSEK
ContributorAndroidWindowsIn Love
on 24 January 2011 - 20:46 #253449 Reply to:253442
PaPaSEK's picture

อยากแงะล่ะสิท่า

By: mr_tawan
ContributoriPhoneAndroidWindows
on 24 January 2011 - 22:41 #253467 Reply to:253433
mr_tawan's picture

อะไรที่ซับซ้อนมาก ช่องโหว่มันก็มากขึ้นครับ เรื่องปรกติ


  • 9tawan.net บล็อกส่วนตัวฮับ
By: cloverink
iPhoneAndroidUbuntuWindows
on 24 January 2011 - 19:55 #253438
cloverink's picture

น่ากลัวเหมือนกัน


inull

By: artiya4u
AndroidUbuntu
on 25 January 2011 - 07:27 #253554
artiya4u's picture

ตอนนี้ google chrome ก็ใช้ SQLite เก็บคุกกี้อยู่แล้วนิ


Found me on @artiya4u

By: 9rockky
AndroidIn Love
on 25 January 2011 - 18:26 #253697

น่าสนุกขึ้นเรื่อยๆ

By: Bank14
ContributorAndroidRed HatWindows
on 25 January 2011 - 23:15 #253739
Bank14's picture

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

By: silvermeteor
iPhoneAndroid
on 26 January 2011 - 00:42 #253759

มีกระทั่ง DB จะเหลืออะไรให้เซิร์ฟเวอร์ทำเนี่ย

ต้องเรียนรู้อีกเพียบเลยแฮะ


ไล่ตามความฝัน... itexcite & webONE

By: pines
Blackberry
on 26 January 2011 - 19:03 #253963

ไม่ต้อง post ไม่ต้อง get คงจะเร็วดีพิลึก แจ๋วๆ

By: artiya4u
AndroidUbuntu
on 26 January 2011 - 20:02 #253974
artiya4u's picture

โหลดบิตทางหน้าเว็บใกล้มาถึงแล้ว


Found me on @artiya4u

By: HudchewMan
ContributorAndroidWindowsIn Love
on 2 February 2011 - 08:43 #255564 Reply to:253974
HudchewMan's picture

--> โหลดบิตทางหน้าเว็บใกล้มาถึงแล้ว

แบบนั้นมีแล้วนะ ^^

http://www.9tana.com/node/bitlet/


~ HudchewMan's Station & @HudchewMan~