บางทีมีการเขียนหน้าเว็บเก็บข้อมูลบางส่วนไว้ที่ฝั่ง ผู้ใช้งาน (Cilent)

Local Storage เปรียบเทียบได้กับ Cookie ของบราวเซอร์ แต่มันทำงานได้มีประสิทธิภาพสูงกว่ากันมาก
Local Storage เป็นส่วนย่อยๆของ HTML5 Web Storage เท่านั้น

HTML5 Web Storage
แบ่งได้สองส่วนย่อยๆคือ
1. localStorage ข้อมูลที่จะเก็บไว้ในเครื่องผู้ใช้ตลอดกาล ไม่มีวันหายไปไหน ยกเว้นบราวเซอร์ของเขาพัง
2. sessionStorage ข้อมูลที่จะหายไป เมื่อหน้าต่างนั้น หรือ windows นั้นถูกปิดไป

การใช้ Cookie ในแต่ละ Request ของเว็บไซต์ จะถูกส่งไปด้วย และถูกจำกัดที่ 4KB
แต่ Web Storage ไม่ส่งไปใน Request และจำกัดให้สูงสุดถึง 5MB ต่อโดเมนเนม

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

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 กันเองนะครับ

blognone.com/news/21346/รู้จักกับวิธีการเก็บข้อมูล-local-storage-ของ-html5

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

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

มันเก็บไว้ที่ พาท ไหนของเครื่องคอม?

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

web storage ใน html5 จะใช้สำหรับจัดเก็บข้อมูลเอาไว้ที่ฝั่ง client เหมือนๆ กับ cookie เลย เพียงแต่มันจะถูกออกแบบมาเพื่อให้ใช้กับภาษาฝั่ง client โดยเฉพาะ ทำให้มันมีข้อได้เปรียบเหนือ cookie ตรงที่
เร็วกว่า : ข้อมูลจาก web storage จะไม่ถูกส่งไปพร้อมกับ HTTP request แต่จะถูกนำมาใช้ก็ต่อเมื่อมีการเรียกใช้เท่านั้น
ใหญ่กว่า : ขนาดของ web storage นั้นใหญ่กว่า cookie หลายเท่า (5MB ต่อ 1 โดเมน)

การใช้ web storage ยังถูกแบ่งออกเป็น 2 แบบด้วยกัน ได้แก่ localStorage และ sessionStorage ทั้งนี้ก็เพื่อให้เหมาะสมในการใช้งานที่หลากหลาย

localStorage vs. sessionStorage
เราสามารถแบ่ง web storage ตามลักษณะการใช้งานได้เป็น 2 แบบ ด้วยกัน ดังนี้
localStorage : ข้อมูลที่เก็บด้วย localStorage จะเก็บไปตลอดกาล ไม่มีวันหมดอายุ
sessionStorage : ข้อมูลที่เก็บด้วย sessionStorage จะหายไปเมื่อมีการปิด window หรือ tab นั้นๆ

เราจะเห็นว่า localStorage และ sessionStorage นั้นเหมือนกันแทบทุกประการ สิ่งเดียวที่มันต่างกันก็คือ “ระยะเวลา” ที่จะเก็บข้อมูลเอาไว้นั่นเอง

วิธีใช้งาน Web Storage ขั้นพื้นฐาน
ทั้ง localStorage และ sessionStorage ต่างก็เป็น object สำหรับจัดเก็บข้อมูล และทั้งคู่ยังมี methods และ property ที่เหมือนกันทุกประการ ดังนี้
setItem(key, value) : เก็บข้อมูล
getItem(key) : ดึงข้อมูลที่เก็บไว้ออกมาใช้ ตาม key ที่ระบุ
removeItem(key) : ลบข้อมูลที่เคยเก็บไว้ ตาม key ที่ระบุ
key(n) : แสดงชื่อของ key ตาม index ที่ระบุ (เริ่มที่ 0)
clear() : ลบข้อมูลที่จัดเก็บไว้ทั้งหมด (เฉพาะโดเมนนั้นๆ)
length : แสดงจำนวนข้อมูลที่จัดเก็บไว้ทั้งหมด (เฉพาะโดเมนนั้นๆ)

ทีนี้เราลองมาดูตัวอย่างการใช้งาน localStorage แบบพื้นฐานกันก่อน

/* สร้าง key ชื่อ 'textSize' เพื่อเอามาเก็บค่า 'large' */
localStorage.setItem('textSize', 'large');

/* สร้าง key ชื่อ 'view' เพื่อเอามาเก็บค่า 'list' */
localStorage.setItem('view', 'list');

/* แสดงค่าของ key ที่ชื่อ 'textSize' */
var textSize = localStorage.getItem('textSize');
console.log(textSize); /* = large */

/* แสดงชื่อของ key ตัวแรกที่ได้เก็บไว้ */
var firsKey = localStorage.key(0);
console.log(firstKey); /* = textSize */

/* แสดงจำนวนข้อมูลที่จัดเก็บไว้ทั้งหมด */
var total = localStorage.length;
console.log(total); /* = 2 */

/* ลบข้อมูลของ key ที่ชื่อ 'view' */
localStorage.removeItem('view');
var view = localStorage.getItem('view');
console.log(view); /* = null */

/* ลบข้อมูลทั้งหมด */
localStorage.clear();
var textSize = localStorage.getItem('textSize');
console.log(textSize); /* = null */

แต่หากเราต้องการจะล้างข้อมูลที่ได้เก็บไปทั้งหมดเมื่อมีการปิด window หรือ tab ก็ให้เราเปลี่ยนมาใช้ sessionStorage แทน โดยการเปลี่ยนชื่อ object จาก localStorage มาเป็น sessionStorage

Web Storage เก็บได้แต่ String !
ข้อมูลที่ต้องการจะจัดเก็บด้วย web storage จะต้องอยู่ในรูปแบบ string เท่านั้น หากเราต้องการจะจัดเก็บ object เราจะต้องแปลงมันให้เป็น string ก่อนเสมอ

/* สร้าง object ชื่อ 'settings' */
var settings = {};
settings.textSize = 'large';
settings.view = 'list';

/* ใช้ JSON.stringify เพื่อแปลง object ให้เป็น string ก่อนที่จะเก็บ */
localStorage.setItem('settings', JSON.stringify(settings));

/* ใช้ JSON.parse เพื่อแปลง string กลับมาเป็น object ก่อนนำไปใช้ */
console.log(JSON.parse(localStorage.getItem('settings')));

เราสามารถนำ Web Storage ไปทำอะไรได้บ้าง ?
เราสามารถนำความสามารถของ web storage ไปประยุกต์ใช้กับ web application ได้หลายรูปแบบด้วยกัน ดังนี้

เก็บค่า Preferences : ใช้เก็บค่าต่างๆ ที่ users สามารปรับแต่งได้เอง เช่น ขนาดตัวอักษร หรือมุมมอง เป็นต้น
เก็บสถานะการใช้งานล่าสุด : ใช้เพื่อเก็บรักษาสถานะของ web application หรือค่า input ต่างๆ ในฟอร์ม ให้คงอยู่เหมือนเดิมแม้ว่าจะปิด web application ไปแล้ว
Cache ข้อมูล : ใช้เก็บข้อมูลบางส่วนที่ไม่ต้องการการอัพเดทแบบ real-time เพื่อจะได้ลดภาระของ server ให้น้อยลง

http://www.softmelt.com/article.php?id=417

การเก็บข้อมูลไว้ที่ฝั่ง Client มันดียังไง ?
โดยทั่วไปแล้ว เว็บต่างๆ มักจะเก็บข้อมูลเอาไว้ที่ฝั่ง server แต่จริงๆ แล้ว การเก็บข้อมูลเอาไว้ที่ฝั่ง client ก็สามารถทำได้เช่นกัน และยังมีข้อดีตรงที่

เข้าถึงข้อมูลได้ด้วย JavaScript
ในบางครั้งเราต้องการนำข้อมูลไปใช้ด้วย JavaScript ซึ่งเป็นภาษาฝั่ง client ที่สามารถเข้าถึงข้อมูลที่เก็บเอาไว้ที่ฝั่ง client ได้โดยสะดวก
ลดภาระของ Server
การเก็บข้อมูลไว้ที่ฝั่ง client เหมือนเป็นการกระจายภาระของ server ไปให้ทางฝั่ง client
เพราะ Cookie ไม่ดีพอ
หากเราต้องการจะเก็บข้อมูลเอาไว้ที่ฝั่ง client หลายๆ คนคงจะนึกถึง cookie แต่เนื่องจากมันถูกสร้างขึ้นมาเพื่อประโยชน์สำหรับภาษา script ทางฝั่ง server เป็นหลัก ทำให้มันมีข้อจำกัดดังนี้

ช้า
ในทุกๆ ครั้งที่เกิด HTTP request ข้อมูล cookie จะต้องถูกส่งไปด้วย ส่งผลให้การส่งผ่านข้อมูลนั้นช้าลง
เล็ก
และด้วยเหตุผลข้างต้น ขนาดของ cookie จึงถูกจำกัดไว้เพียงแค่ 4 KB เท่านั้น ซึ่งนั่นอาจไม่เพียงพอ
ด้วยข้อจำกัดดังกล่าว ใน html5 จึงได้มีการจัดเก็บข้อมูลในรูปแบบใหม่ที่เรียกว่า web storage

รู้จักกับ HTML5 Web Storage
web storage ใน html5 จะใช้สำหรับจัดเก็บข้อมูลเอาไว้ที่ฝั่ง client เหมือนๆ กับ cookie เลย เพียงแต่มันจะถูกออกแบบมาเพื่อให้ใช้กับภาษาฝั่ง client โดยเฉพาะ ทำให้มันมีข้อได้เปรียบเหนือ cookie ตรงที่

เร็วกว่า
ข้อมูลจาก web storage จะไม่ถูกส่งไปพร้อมกับ HTTP request แต่จะถูกนำมาใช้ก็ต่อเมื่อมีการเรียกใช้เท่านั้น
ใหญ่กว่า
ขนาดของ web storage นั้นใหญ่กว่า cookie หลายเท่า (5MB ต่อ 1 โดเมน)
การใช้ web storage ยังถูกแบ่งออกเป็น 2 แบบด้วยกัน ได้แก่ localStorage และ sessionStorage ทั้งนี้ก็เพื่อให้เหมาะสมในการใช้งานที่หลากหลาย

localStorage vs. sessionStorage
เราสามารถแบ่ง web storage ตามลักษณะการใช้งานได้เป็น 2 แบบ ด้วยกัน ดังนี้

localStorage
ข้อมูลที่เก็บด้วย localStorage จะเก็บไปตลอดกาล ไม่มีวันหมดอายุ
sessionStorage
ข้อมูลที่เก็บด้วย sessionStorage จะหายไปเมื่อมีการปิด window หรือ tab นั้นๆ
เราจะเห็นว่า localStorage และ sessionStorage นั้นเหมือนกันแทบทุกประการ สิ่งเดียวที่มันต่างกันก็คือ “ระยะเวลา” ที่จะเก็บข้อมูลเอาไว้นั่นเอง

วิธีใช้งาน Web Storage ขั้นพื้นฐาน
ทั้ง localStorage และ sessionStorage ต่างก็เป็น object สำหรับจัดเก็บข้อมูล และทั้งคู่ยังมี methods และ property ที่เหมือนกันทุกประการ ดังนี้

setItem(key, value)
เก็บข้อมูล
getItem(key)
ดึงข้อมูลที่เก็บไว้ออกมาใช้ ตาม key ที่ระบุ
removeItem(key)
ลบข้อมูลที่เคยเก็บไว้ ตาม key ที่ระบุ
key(n)
แสดงชื่อของ key ตาม index ที่ระบุ (เริ่มที่ 0)
clear()
ลบข้อมูลที่จัดเก็บไว้ทั้งหมด (เฉพาะโดเมนนั้นๆ)
length
แสดงจำนวนข้อมูลที่จัดเก็บไว้ทั้งหมด (เฉพาะโดเมนนั้นๆ)

พิมพ์ localStorage ที่ console ของ firebug เพื่อดูว่า Mashable ใช้ localStorage เก็บข้อมูลอะไรเอาไว้บ้าง

http://www.siamhtml.com/html5-web-storage/