ข้อมูลองค์ความรู้โดย
Web Master (IT)
ตำแหน่ง อาจารย์

รู้จักกับวิธีการเก็บข้อมูล Local Storage ของ HTML5

ประเภททางด้าน IT หลัก :   Networking & Infrastructure
ประเภททางด้าน IT ย่อย :   Networking
  ลงข้อมูลเมื่อ 10:35:36 21/01/2013
  Page View (1574) แบ่งปัน

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 ผ่าน blognone



องค์ความรู้ที่มีผู้อ่านมากสุด
รายละเอียดของระบบ e-Purchasing Online ของกรมส่งเสริมอุตสาหกรรม กระทรวงอุตสาหกรรม
รายละเอียดของระบบ e-Purchasing Online ของกรมส่งเสริมอุตสาหกรรม กระทรวงอุตสาหกรรม

โดย... Web Master (IT)

เรียนรู้เรื่อง เมนบอร์ด (Mainboard, mother board)
แผงวงจรหลัก เป็นหัวใจสำคัญที่สุดที่อยู่ภายในเครื่อง เมื่อเปิดฝาเครื่องออกมาจะเป็นแผงวงจรขนาดใหญ่วางนอนอยู่ นั่นคือส่วนที่เรียกว่า "เมนบอร์ด"

โดย... Web Master (IT)

AutoCAD คืออะไร
AutoCAD (Computer Aided Drefting/Dedign, CAD) เป็นซอฟต์แวร์ช่วยออกแบบด้วยคอมพิวเตอร์ ที่สามารถรองรับการทำงานทั้งใน 2 มิติ และ 3 มิติ

โดย... Web Master (IT)

ทำความรู้จักกับ IIG (International Internet Gateway ) & NIX(National Internet Exchange )
การใช้งานอินเตอร์เน็ตของเราทุกคน จำเป็นต้องผ่านระบบการให้ บริการของ IIG และ NIX เพราะว่า เป็นเหมือนเส้นทางหลักของศูนย์กลางโครงข่าย ของประเทศไทย ทั้งภายในและ ภายนอกประเทศ ที่จากเดิมเราจะทราบกันอยู่แล้วว่า บริการทั้งสองประเภทนี้จะมีผู้ให้บริการ แบบผูกขาดอยู่เพียงรายเดียวเท่านั้น คือ การสื่อสารแห่งประเทศไทย เพียงเท่านั้น แต่ ณ ปัจจุบันนี้ได้มีหน่วยงานที่เข้ามา กำกับดูแลในเรื่องของโทรคมนาคมของเมืองไทยอย่างเป็น รูปธรรมมากยิ่งขึ้น จึงก่อให้เกิดการแข่งขันอย่างเสรี และปัจจุบัน ทาง กทช. ผู้เป็นหน่วยงานหลัก ของ การกำกับดูแลได้เปิดอนุญาตให้กลุ่มบริษัทเอกชนทั่วไป สามารถขอรับใบอนุญาต การให้ บริการทั้งสองประเภทได้ เพื่อให้เกิดการแข่งขันกันอย่างเป็นธรรม และก่อให้ เกิดประโยชน์สูงสุด แก่ผู้บริโภคกันเลยละครับ

โดย... Web Master (IT)

ความรู้เรื่อง...การ์ดจอ
การ์ดจอ (Video Card) การ์ดแสดงผล หรือ กราฟฟิกการ์ด (Graphic card) เป็น แผงวงจรอิเล็กทรอนิกส์ ที่ทำหน้าที่ในการนำข้อมูลที่ได้จากการประมวลผลของซีพียูมาแสดงบนจอภาพ ทำให้ผู้ใช้ สามารถควบคุมการทำงาน ได้อย่างมีประสิทธิภาพ โดยจอภาพจะเป็นส่วนที่รับข้อมูลจากการ์ดแสดงผลอีกทีหนึ่ง การ์ดกราฟฟิกทีได้รับความนิยมและใช้กันแพร่หลายในอยู่ปัจจุบัน เป็นการ์ดกราฟฟิกที่มี GPU เป็นตัวประมวลผล

โดย... Web Master (IT)

Windows XP Service Pack 3 Overview
ภาพรวม Windows XP Service Pack 3 จะประกอบด้วย security updates hotfix และ patch ต่างๆ ที่ไมโครซอฟท์ปล่อยหลังออก SP2 เป็นต้นมาไม่มีการเปลี่ยนแปลงในเชิงฟังก์ชั่นและการทำงานที่สำคัญ แต่จะอัพเดตองค์ประกอบต่างๆ อย่าง Microsoft Management Console (MMC) 3.0 และ Microsoft Core XML Services 6.0 (MSXML6) เป็นเวอร์ชั่นปัจจุบัน สิ่งที่น่าสนใจประการหนึ่งคือ ไมโครซอฟท์ไม่ได้รวมเอา Windows Internet Explorer 7 เข้ามาไว้ใน SP3 แต่จะใส่มาเฉพาะส่วนที่เป็นอัพเดตและ fix เท่านั้น คล้ายกับว่าไมโครซอฟท์ตั้งใจจะไม่บีบให้ลูกค้าต้องเปลี่ยนจาก IE6 มาใช้ IE7 ใครที่ต้องการอยู่กับ IE6 (ด้วยเหตุผลใดก็ตาม) ก็จะยังสามารถใช้ IE6 ได้ สำหรับใครที่เปลี่ยนไปเป็น IE7 แล้วจะมีอัพเดตมาให้เช่นเดียวกัน

โดย... Web Master (IT)

การประยุกต์ใช้ DATA WAREHOUSEING
มีการประมาณการณ์เอาไว้ว่า ถ้าไม่มีการนำเอาระบบ Data Warehouse มาประยุกต์ใช้ในองค์กร จะมีคน เพียง 10 เปอร์เซ็นต์เท่านั้นที่จะสามารถใช้งานระบบสารสนเทศได้ตามความต้องการ และนั่นก็คือจำนวนคนที่มีระดับความรู้ ทาง IT เพียงพอที่จะสร้าง Query ขึ้นด้วยตนเองเพื่อสนองความต้องการด้านข้อมูลของตน นอกจากนั้นแล้ว ระบบ EIS (Executive Information System) และ DSS (Decision Support System) ก็มักจะทำงานได้ไม่ตรงกับที่ต้องการ เพราะข้อมูล ดิบจากฐานข้อมูลประจำวันนั้น เข้าถึงยาก หรือไม่ก็ทำความเข้าใจได้ไม่ง่ายนัก ยิ่งไปกว่านั้น การอนุญาตให้ผู้ใช้ระดับสูง สามารถเข้าถึงและค้นหาฐานข้อมูลได้โดยตรงอาจจะส่งผลต่อประสิทธิภาพของงานข้อมูล รวมไปถึงความเป็นระเบียบ (Data Integrity) ของฐานข้อมูลด้วย

โดย... Web Master (IT)

นวัตกรรมรถบรรทุกขนาดใหญ่ B-double รถกึ่งพ่วงบรรทุกแบบพิเศษ
ในยุคที่ประสิทธิภาพและต้นทุนการขนส่งเป็นเรื่องสำคัญที่ต้องพัฒนาร่วมกันอย่างเร่งด่วน โดยเฉพาะเมื่อต้นทุนหลักของการขนส่งคือน้ำมันเชื้อเพลิงมีสัดส่วนสูงขึ้นอย่างต่อเนื่อง ก๊าซธรรมชาติและไบโอดีเซลกลายเป็นประเด็นสำคัญที่ผู้ประกอบการขนส่งต้องศึกษาและพัฒนากองรถมาทดลองและใช้กันแน่นอน การพัฒนารถไฟและการขนส่งทางลำน้ำให้สามารถขนส่งสินค้าในเส้นทางหลักได้มากขึ้น มีบริการที่แน่นอนและสามารถเชื่อมต่อกับการขนส่งด้วยรถบรรทุกได้สะดวกรวดเร็ว เป็นเรื่องที่ทุกฝ่ายปรารถนา เพราะคาดหมายว่าจะทำให้การขนส่งได้ประสิทธิภาพที่ดีกว่าด้วยต้นทุนที่ต่ำกว่าการขนส่งด้วยรถบรรทุก ประเด็นเรื่องการขนส่งในปริมาณมากๆ ต่อเที่ยว มักจะยกประเด็นในเรื่องการประหยัดพลังงาน การลดปริมาณมลพิษจากน้ำมัน และการประหยัดค่าจ้างแรงงานของพนักงานขับรถ โดยทั้งหมดคิดหารเฉลี่ยจากจำนวนหน่วยสินค้าและระยะทางขนส่งต่อเที่ยวนั้นๆ หลายครั้งที่รถบรรทุกถูกวางตำแหน่งให้ทำหน้าที่ขนส่งและกระจายสินค้าในระยะทางรัศมีสั้นๆ รอบๆ สถานีหรือต้นทางปลายทางที่เป็น hub

โดย... Web Master (IT)

การเขียนโปรแกรมเชิงวัตถุ (Object Oriented Programming: OOP)
ในปัจจุบันภาษาในการเขียนโปรแกรมเพื่อพัฒนาระบบสารสนเทศที่ใช้ในองค์กรธุรกิจ มีมากมายหลายภาษาให้เลือก การเรียนรู้ภาษาเขียนโปรแกรมหรือการมีความรู้ในหลาย ๆ ภาษาถือเป็นสิ่งที่ดี แต่ไม่ได้หมายความว่าเราจำเป็นต้องเขียนโปรแกรมให้ได้ทุก ๆ ภาษา แต่สามารถเลือกบางภาษาที่เรามีความถนัดหรือเลือกที่จะเริ่มต้นกับภาษาใด ภาษาหนึ่งได้ ซึ่งการเขียนโปรแกรมเชิงวัตถุถือได้ว่าได้รับความนิยมในปัจจุบันรวมถึงแนวโน้มในอนาคต ซึ่ง Java ก็เป็นหนึ่งในการเขียนโปรแกรมเชิงวัตถุ ที่มีพื้นฐานมาจากภาษา C และคิดว่าน่าจะเป็นอีกภาษาหนึ่งที่น่าศึกษาและน่าเรียนรู้ เพราะเทคโนโลยีของ Java ถือว่ากำลังร้อนแรงในแวดวงของ Software

โดย... Web Master (IT)

เรียนรู้เรื่อง CPU
CPU (Central Processing Unit) หรือ โปรเซสเซอร์ (Processor) คือ ส่วนหนึ่งของเครื่องคอมพิวเตอร์ที่มีหน้าที่ควบคุมกา รทำงานของส่วนอื่นๆ โดยทั่วไปแล้ว ซีพียูจะประกอบไปด้วย หน่วยควบคุม (Control Unit), หน่วยประมวลผลคณิตศาสตร์และตรรกศาสตร์ (Arithmetic and Logic Unit; ALU) และหน่วยความจำ ได้แก่ รีจีสเตอร์ (Register), แคช (Cache), แรม (RAM) และรอม (ROM)

โดย... Web Master (IT)