reveal.js

# localStorage และ sessionStorage

Lesson 5 - JavaScript กับ DOM และ Event

---

## คำจำกัดความ

**Web Storage** คือพื้นที่เก็บข้อมูลแบบ key-value ใน browser ประกอบด้วย **localStorage** และ **sessionStorage** โดยข้อมูลถูกเก็บเป็น string เสมอ

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#458588", "primaryTextColor": "#fbf1c7", "primaryBorderColor": "#fabd2f", "lineColor": "#a89984", "secondaryColor": "#b8bb26", "tertiaryColor": "#d3869b", "background": "#282828", "mainBkg": "#3c3836", "textColor": "#ebdbb2"}}}%%
flowchart LR
  A["JavaScript Object<br/>ข้อมูลในโค้ด"] --> B["JSON.stringify()<br/>แปลงเป็น string"]
  B --> C["localStorage<br/>เก็บใน Browser"]
  C --> D["JSON.parse()<br/>แปลงกลับเป็น object"]
</pre>

---

## เปรียบเทียบ localStorage และ sessionStorage

| Storage | อายุข้อมูล | ขอบเขต | เหมาะกับ |
|---|---|---|---|
| `localStorage` | อยู่จนกว่าจะลบ | origin เดียวกัน | theme, preference, cart |
| `sessionStorage` | หายเมื่อปิด tab | tab เดียว | wizard state, temporary form |

---

## การบันทึกและอ่านข้อมูล

```js
const preference = {
  theme: "dark",
  fontSize: "large"
};

// บันทึก object ต้องแปลงเป็น string ก่อน
localStorage.setItem("preference", JSON.stringify(preference));

// อ่านข้อมูลจะได้ string เสมอ
const savedText = localStorage.getItem("preference");
const savedPreference = JSON.parse(savedText);

console.log(savedPreference.theme); // dark
```

---

## ลบข้อมูล

```js
// ลบ key เดียว
localStorage.removeItem("preference");

// ลบทั้งหมดใน localStorage ของ origin นี้
localStorage.clear();
```

---

## sessionStorage

```js
sessionStorage.setItem("currentStep", "2");
console.log(sessionStorage.getItem("currentStep")); // 2
```

เมื่อปิด tab ข้อมูลใน `sessionStorage` จะหายไป

---

## ข้อจำกัด

- จุได้ประมาณ **5MB** แล้วแต่ browser
- เก็บได้เฉพาะ **String**
- ไม่เหมาะกับข้อมูลสำคัญ เช่น password, token สำคัญ หรือข้อมูลส่วนตัว
- เข้าถึงได้จาก JavaScript จึงเสี่ยงหากเว็บมี XSS

---

## การประยุกต์

- บันทึก theme
- บันทึก shopping cart
- บันทึก user preference
- บันทึกสถานะ sidebar เปิด/ปิด
- จำค่าฟอร์มชั่วคราว

---

## ตัวอย่าง Theme Toggle

```html
<button id="themeButton">เปลี่ยนธีม</button>

// ตั้งค่า theme จากข้อมูลที่เคยบันทึก
  document.documentElement.dataset.theme = savedTheme;

button.addEventListener("click", () => {
    const current = document.documentElement.dataset.theme;
    const next = current === "light" ? "dark" : "light";

// บันทึก theme ใหม่
    document.documentElement.dataset.theme = next;
    localStorage.setItem("theme", next);
  });
</script>
```

---

## สมการพื้นที่จัดเก็บโดยประมาณ

<math display="block">
  <mrow>
    <mi>remaining</mi>
    <mo>=</mo>
    <mi>quota</mi>
    <mo>-</mo>
    <mi>used</mi>
  </mrow>
</math>

โดยที่ **remaining** คือพื้นที่คงเหลือ, **quota** คือพื้นที่ที่ browser อนุญาต, และ **used** คือพื้นที่ที่ใช้ไปแล้ว

---

## แบบทดสอบหลังเรียน

1. localStorage และ sessionStorage ต่างกันอย่างไร
2. ทำไมต้องใช้ `JSON.stringify()` ก่อนบันทึก object
3. `getItem()` คืนค่าเป็นชนิดใด
4. ข้อมูลแบบใดไม่ควรเก็บใน localStorage
5. localStorage ประยุกต์ใช้กับอะไรได้บ้าง

---

## End

<a href="/web-programming/05-dom-event/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>