Browser APIs

Web Storage คืออะไร

Web Storage คือพื้นที่เก็บข้อมูลในเบราว์เซอร์ที่ข้อมูลอยู่ได้หลังจากรีโหลดหน้าหรือปิด-เปิดเบราว์เซอร์ ต่างจากตัวแปรปกติที่หายไปทันทีเมื่อรีโหลดหน้า เช่น ถ้าต้องการจำการตั้งค่าของผู้ใช้หรือเนื้อหาที่กรอกค้างไว้ ตัวแปรใน JavaScript ทำไม่ได้ — Web Storage ทำได้

Web Storage มี 2 ชนิดคือ `localStorage` และ `sessionStorage` — ทั้งคู่ใช้ API ชุดเดียวกัน แต่ต่างกันที่อายุและขอบเขตของข้อมูล

`localStorage` vs `sessionStorage` — ต่างกันอย่างไร

API พื้นฐาน — setItem, getItem, removeItem, clear

ทั้ง `localStorage` และ `sessionStorage` ใช้ method เดียวกัน 4 ตัว: - `setItem(key, value)` — บันทึกข้อมูล - `getItem(key)` — ดึงข้อมูล - `removeItem(key)` — ลบข้อมูลรายการเดียว - `clear()` — ล้างข้อมูลทั้งหมดใน storage นั้น

// บันทึกข้อมูล
localStorage.setItem("username", "สมชาย");

// ดึงข้อมูล
const name = localStorage.getItem("username");
console.log(name); // "สมชาย"

// ลบรายการเดียว
localStorage.removeItem("username");

// ล้างทั้งหมด
localStorage.clear();

`getItem` จะคืน `null` เมื่อ key ที่ระบุไม่มีอยู่ใน storage — ควรตรวจก่อนนำไปใช้เพื่อป้องกัน error: ``` const value = localStorage.getItem("theme"); if (value !== null) { applyTheme(value); } ```

เก็บ object — ต้องใช้ JSON

Web Storage เก็บได้เฉพาะ string — ถ้าเก็บ object โดยตรงจะได้ `"[object Object]"` ซึ่งใช้งานไม่ได้ ต้องแปลงด้วย `JSON.stringify` ก่อนเก็บ และใช้ `JSON.parse` เมื่อดึงออกมา

const user = { name: "สมชาย", age: 25 };

// เก็บ: แปลง object เป็น string ก่อน
localStorage.setItem("user", JSON.stringify(user));

// ดึง: แปลง string กลับเป็น object
const raw = localStorage.getItem("user");
const parsed = JSON.parse(raw);

console.log(parsed.name); // "สมชาย"
console.log(parsed.age);  // 25

ข้อควรระวัง

• **เก็บได้เฉพาะ string** — ค่าทุกชนิดถูก coerce เป็น string โดยอัตโนมัติ เช่น `setItem("count", 5)` จะเก็บเป็น `"5"` ไม่ใช่ตัวเลข — ดึงออกมาแล้วต้องแปลงกลับเองด้วย `Number()`
• **getItem คืน null** — ถ้า key ไม่มีอยู่จะได้ `null` ไม่ใช่ `undefined` — ควรตรวจก่อนใช้เพื่อป้องกัน `JSON.parse(null)` ที่ให้ผลเป็น `null` โดยไม่ throw
• **ขนาดจำกัด ~5 MB** — เกินแล้วจะ throw `QuotaExceededError` ไม่เหมาะกับเก็บรูปภาพ, ไฟล์ หรือข้อมูลจำนวนมาก
• **อย่าเก็บข้อมูลสำคัญ** — localStorage อ่านได้จาก JavaScript ทุกตัวในโดเมน ถ้ามี XSS จะถูกขโมยได้ง่าย — ห้ามเก็บ password หรือ token ที่ใช้ยืนยันตัวตน

Lab 1: บันทึกและดึงชื่อผู้ใช้ด้วย localStorage

Lab 2: บันทึก object ด้วย JSON.stringify / JSON.parse