localStorage & sessionStorage

Web Storage คืออะไร?

Web Storage API มอบ key/value store แบบ synchronous ให้ทุก origin บนเว็บถึงสองตัวที่ฝังมาใน browser ได้แก่ localStorage และ sessionStorage ทั้งคู่ใช้ interface เรียบง่ายแบบเดียวกัน — คุณเรียก setItem, getItem, removeItem และ clear — และทั้งคู่จะเก็บทุก value เป็น string เสมอ ไม่มี schema ไม่มี indexing และไม่มี overhead แบบ async

Web Storage เป็นแบบ origin-scoped: หน้าเว็บที่ https://example.com ไม่สามารถอ่าน storage ของ https://other.com ได้ ข้อจำกัดนี้ถูกบังคับโดย same-origin policy ของ browser ไม่ใช่จากโค้ดที่คุณเขียน

ความแตกต่างหลักระหว่าง store ทั้งสองคือ อายุของข้อมูล (lifetime) และขอบเขตของแท็บ (tab scope):

localStorage — ข้อมูลอยู่ถาวร (จนกว่าจะถูกลบอย่างชัดเจน) และถูกแชร์ข้ามทุกแท็บและทุกหน้าต่างที่เปิดอยู่บน origin เดียวกัน
sessionStorage — ข้อมูลอยู่เฉพาะตลอดอายุของแท็บ browser (หรือหน้าต่าง) เดียวเท่านั้น การปิดแท็บจะล้างข้อมูลทิ้ง และแท็บอื่นมองไม่เห็นข้อมูลนี้

เปรียบเทียบ localStorage กับ sessionStorage แบบรวบรัด

flowchart LR
  subgraph LS[localStorage]
    direction LR
    LA[Tab A sets item] -->|writes| LStore[(origin-wide store)]
    LB[Tab B gets item] -->|reads same data| LStore
    LR[Browser restart] -->|data survives| LStore
  end
  subgraph SS[sessionStorage]
    direction LR
    SA[Tab A sets item] -->|writes| SStoreA[(Tab A store)]
    SB[Tab B] -->|own empty store| SStoreB[(Tab B store)]
    SC[Tab A closes] -->|store cleared| SStoreA
  end

localStorage อยู่ถาวรและถูกแชร์ข้ามแท็บ ส่วน sessionStorage แยกตามแท็บและถูกล้างเมื่อปิด

โมดูลนี้ครอบคลุมเรื่องอะไรบ้าง

โมดูลนี้จะพาคุณไปทีละขั้นในทุกสิ่งที่คุณต้องรู้เพื่อใช้ Web Storage ได้อย่างมั่นใจ:

บทเรียน	สิ่งที่คุณจะได้เรียนรู้
หน้านี้	Web Storage คืออะไร และ store ทั้งสองตัวต่างกันอย่างไรในระดับภาพรวม
`local-vs-session`	lifetime, tab scope และกฎเรื่อง origin แบบเจาะลึก
`the-api`	API ครบชุด `setItem` / `getItem` / `removeItem` / `clear` / `key(i)` / `length`
`json-and-objects`	การเก็บและดึงข้อมูล object ด้วย `JSON.stringify` / `JSON.parse`
`storage-event-and-limits`	storage event ข้ามแท็บ, quota ราว ~5 MB และข้อควรระวังเรื่องการบล็อกแบบ sync

ตัวอย่างรันได้ตัวแรกของคุณ

โค้ดด้านล่างจะเขียน value ลง localStorage อ่านกลับมา แล้วเคลียร์ทิ้งเพื่อไม่ให้ค้างอยู่ใน storage ของ browser ข้ามการโหลดหน้า

Browser Storage

// Write
localStorage.setItem('demo:greeting', 'Hello, Web Storage!');

// Read back
const value = localStorage.getItem('demo:greeting');
console.log('Stored value:', value);

// sessionStorage is independent — each tab has its own
sessionStorage.setItem('demo:tab-id', 'tab-001');
console.log('Tab value:', sessionStorage.getItem('demo:tab-id'));

// Clean up — always remove demo: keys after running
localStorage.removeItem('demo:greeting');
sessionStorage.removeItem('demo:tab-id');
console.log('After cleanup localStorage:', localStorage.getItem('demo:greeting'));
console.log('After cleanup sessionStorage:', sessionStorage.getItem('demo:tab-id'));