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 */
/* สร้าง 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’)));
- เก็บค่า Preferences ใช้เก็บค่าต่างๆ ที่ users สามารปรับแต่งได้เอง เช่น ขนาดตัวอักษร หรือมุมมอง เป็นต้น
- เก็บสถานะการใช้งานล่าสุด ใช้เพื่อเก็บรักษาสถานะของ web application หรือค่า input ต่างๆ ในฟอร์ม ให้คงอยู่เหมือนเดิมแม้ว่าจะปิด web application ไปแล้ว
- Cache ข้อมูล ใช้เก็บข้อมูลบางส่วนที่ไม่ต้องการการอัพเดทแบบ real-time เพื่อจะได้ลดภาระของ server ให้น้อยลง
ข้อเสียของ Web Storage
- ไม่มีการกำหนดอายุ ในบางกรณี เราอาจต้องการกำหนดอายุของข้อมูลที่จะจัดเก็บเหมือนกับที่ cookie ทำได้
- ไม่ปลอดภัย ข้อมูลที่ถูกจัดเก็บด้วย web storage จะอยู่ในรูป string ที่อ่านรู้เรื่อง และยังสามารถดูได้ผ่านทาง web browsers อีกด้วย