Web Storage ใน html5 จะใช้สำหรับจัดเก็บข้อมูลเอาไว้ที่ฝั่ง client เหมือนๆ กับ cookie เลย เพียงแต่มันจะถูกออกแบบมาเพื่อให้ใช้กับภาษาฝั่ง client โดยเฉพาะ ทำให้มันมีข้อได้เปรียบเหนือ cookie
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 เพื่อความปลอดภัยของข้อมูลมาด้วย
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 ให้น้อยลง
รับทําเว็บไซต์ 
แลกลิงค์ 
