จัดการข้อมูล Web App ไม่จำเป็นต้องมี Database เสมอไป Browser Storage รองรับ Chrome 4+, Firefox 3.5+, IE 8+ และ Mobile Browsers
สองตัวเลือกหลัก
localStorage
ข้อมูลคงอยู่แม้ปิด Browser แล้วก็ตาม (Persistent)
- Save:
localStorage.setItem("key", "value") - Get:
localStorage.getItem("key") - Remove:
localStorage.removeItem("key") - Clear All:
localStorage.clear()
sessionStorage
ข้อมูลอยู่จนกว่าจะปิด Browser/Tab (Session-only)
- Save:
sessionStorage.setItem("key", "value") - Get:
sessionStorage.getItem("key") - Remove:
sessionStorage.removeItem("key") - Clear All:
sessionStorage.clear()
เก็บ Array ลง Storage
ไม่เก็บ Array ตรงๆ ได้ ต้องแปลงเป็น String ก่อนด้วย JSON.stringify()
var ourArray = [1,2,3,4,5];
// Save
localStorage.setItem("ourArrayKey", JSON.stringify(ourArray));
// หรือ
sessionStorage.setItem("ourArrayKey", JSON.stringify(ourArray));
// Retrieve & Parse กลับเป็น Array
var storedArray = localStorage.getItem("ourArrayKey");
ourArray = JSON.parse(storedArray);
// หรือ sessionStorage
var storedArray = sessionStorage.getItem("ourArrayKey");
ourArray = JSON.parse(storedArray);สรุปความแตกต่าง
| คุณสมบัติ | localStorage | sessionStorage |
|---|---|---|
| อายุข้อมูล | ถาวร (จนกว่าจะลบ) | จนกว่าจะปิด Tab/Browser |
| ขอบเขต (Scope) | Origin (Domain + Port + Protocol) | Origin + Tab/Window (แยกกันต่อ Tab) |
| ขนาด | ~5-10MB | ~5-10MB |
| ส่งไป Server | ไม่ (Client-side only) | ไม่ (Client-side only) |
เมื่อไหร่ควรใช้ไหน?
- localStorage: Preferences, Theme, Token, Cache ข้อมูลที่ต้องคงอยู่
- sessionStorage: Form Data ชั่วคราว, Multi-step Wizard, Sensitive Data ที่อยากหายเมื่อปิด Tab
