[HTML5] Web Storage

Web Storage คือ ตัวเก็บข้อมูลที่ Browser หรือทางฝั่ง Client นั้นเอง เอ๊ะ! คุ้นๆกับความหมายมันไหมล่ะครับ

ใช่แล้ว มันคล้ายๆ กับ Cookie นั้นเอง แต่เจ้าตัว Web Storage นั้นมากับ HTML5

ซึ่งความต่างของเจ้าตัว Web Storage กับ Cookie มีความต่างดังนี้

Web Storage Cookie
ขนาด: เก็บข้อมูลได้ 5 MB ขนาด: เก็บข้อมูลได้ 4 KB
ความเร็ว: ข้อมูลจาก Web Storage จะไม่ส่งไปกับ HTTP request
จะใช้ก็ต่อเมื่อเรียกใช้เท่านั้น
ความเร็ว: ในทุกๆ ครั้งที่เกิด HTTP request ข้อมูล cookie จะต้องถูกส่งไปด้วย
ส่งผลให้การส่งผ่านข้อมูลนั้นช้าลง

เรารู้ความต่างของมันไปแล้วเรามารู้จักกับมันกันดีกว่าครับ

เจ้าตัว Web Storage มีอยู่ 2 แบบด้วยกัน คือ

  • Local Storage ข้อมูลที่เก็บด้วย localStorage จะเก็บไปตลอดกาล ไม่มีวันหมดอายุ
  • Session Storage ข้อมูลที่เก็บด้วย sessionStorage จะหายไปเมื่อมีการปิด window หรือ tab นั้นๆ

เราพอรู้จักความหมายของมันแล้ว ต่อไปเราต้องใช้มันกันครับ

วิธีใช้ Web Storage พื้นฐานมีดังนี้

ทั้ง localStorage และ sessionStorage ต่างก็เป็น object สำหรับจัดเก็บข้อมูล และทั้งคู่ยังมี methods และ property ที่เหมือนกัน ดังนี้

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

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

/* สร้าง 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 */

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

ข้อเสียของ Web Storage

  • ไม่มีการกำหนดอายุ ในบางกรณี เราอาจต้องการกำหนดอายุของข้อมูลที่จะจัดเก็บเหมือนกับที่ cookie ทำได้
  • ไม่ปลอดภัย ข้อมูลที่ถูกจัดเก็บด้วย web storage จะอยู่ในรูป string ที่อ่านรู้เรื่อง และยังสามารถดูได้ผ่านทาง web browsers อีกด้วย