The Web Storage API

หลายคนใช้แค่ setItem/getItem แล้วเดา method ที่เหลือ ทำให้พลาดรายละเอียดอย่าง key(i) หรือพฤติกรรมของ clear() หน้านี้รวบ method และ property ทั้งหมดของ Storage interface ไว้ในที่เดียว

API ครบทั้งชุด

ทั้ง localStorage และ sessionStorage ต่างก็ implement interface Storage แบบเดียวกัน ทุก method และ property ด้านล่างนี้ใช้ได้กับทั้งคู่ — แค่สลับชื่อ object เท่านั้น

setItem(key, value)

เก็บค่า string ภายใต้ key ที่เป็น string หาก key นั้นมีอยู่แล้ว ค่าจะถูก เขียนทับ (ไม่มี method “update” แยกต่างหาก)

localStorage.setItem('demo:theme', 'dark');
localStorage.setItem('demo:theme', 'light'); // overwrites — now 'light'

getItem(key)

คืนค่า string ที่เก็บไว้สำหรับ key ที่ระบุ หรือ null (ไม่ใช่ undefined) หากไม่มี key นั้นอยู่

const theme = localStorage.getItem('demo:theme');  // 'light'
const missing = localStorage.getItem('demo:nope'); // null

ควรตรวจสอบกัน null เสมอก่อนนำค่าที่คืนมาไปใช้

removeItem(key)

ลบ key/value pair หนึ่งคู่ การเรียกกับ key ที่ไม่มีอยู่จะไม่เกิดอะไรขึ้น (no-op) — ไม่มีการโยน error

localStorage.removeItem('demo:theme');
console.log(localStorage.getItem('demo:theme')); // null

clear()

ลบ key/value pair ทั้งหมด ใน store สำหรับ origin ปัจจุบัน ใช้อย่างระมัดระวังกับ localStorage — จะล้างทุก key ที่ถูกตั้งโดยทุกสคริปต์บน origin นั้น

localStorage.clear();
console.log(localStorage.length); // 0

key(index)

คืนชื่อ key ที่ index ตัวเลขที่ระบุ (เริ่มที่ 0) หรือ null หาก index อยู่นอกช่วง ลำดับไม่รับประกันว่าจะเป็นลำดับการ insert — ให้ถือว่าขึ้นอยู่กับ implementation

localStorage.setItem('demo:a', '1');
localStorage.setItem('demo:b', '2');
console.log(localStorage.key(0)); // 'demo:a' or 'demo:b' — order varies

length

property แบบอ่านอย่างเดียวที่คืนจำนวน key/value pair ที่เก็บอยู่ในปัจจุบัน ใช้ค่านี้เพื่อ iterate ทุก key:

for (let i = 0; i < localStorage.length; i++) {
  const k = localStorage.key(i);
  console.log(k, localStorage.getItem(k));
}

รันได้: API ครบชุดในการทำงานจริง

Browser StorageRun ▸Open in StackBlitz ▸

localStorage.setItem('demo:user', 'Ada'); console.log('get:', localStorage.getItem('demo:user')); console.log('length:', localStorage.length); localStorage.removeItem('demo:user'); console.log('after remove:', localStorage.getItem('demo:user'));

การอ่าน key ที่ไม่มีอยู่จะคืนค่า null

นี่เป็นหนึ่งในบั๊กที่พบบ่อยที่สุดกับ Web Storage: การสับสนระหว่าง null กับ value ที่เก็บไว้

// Nothing stored yet
const val = localStorage.getItem('demo:nonexistent');
console.log(val);        // null
console.log(val === null); // true — use === null check, not falsy !val

ระวัง: string "null" เป็นค่าที่เก็บได้อย่างถูกต้องและเป็น truthy ให้ใช้ === null เสมอแทน !val เพื่อแยกแยะระหว่าง “ไม่มี key” กับ “มี key อยู่แต่ค่าว่างหรือเป็น falsy”

การ iterate ทุก key

localStorage.setItem('demo:one', '1');
localStorage.setItem('demo:two', '2');

for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  console.log(key, '->', localStorage.getItem(key));
}

// Clean up
localStorage.removeItem('demo:one');
localStorage.removeItem('demo:two');

🗄️ ประเด็นสำคัญ

ไม่มี method “update” — setItem จะเขียนทับค่าใด ๆ ที่มีอยู่สำหรับ key นั้น key ที่ไม่มีอยู่จะอ่านกลับมาเป็น null เสมอ ไม่ใช่ undefined ให้ตรวจสอบ === null เพื่อแยกแยะ key ที่ไม่มีอยู่ออกจาก empty string ที่เก็บไว้

ข้อแลกเปลี่ยน

ตัวเลือก	Benefit	Cost
API แบบ key/value เรียบง่าย (setItem/getItem)	เรียนรู้เร็ว ไม่ต้องตั้ง schema หรือ config ใด ๆ	ไม่มี query, index หรือ transaction ต้อง iterate เองด้วย key(i)/length หากต้องการค้นหา
clear() ล้างทั้ง origin	ล้างข้อมูลทั้งหมดได้ในคำสั่งเดียว เหมาะกับ logout เต็มรูปแบบ	ล้าง key ของทุกสคริปต์บน origin นั้น ไม่ใช่แค่ของโค้ดที่เรียก เสี่ยงลบข้อมูลของ library อื่นโดยไม่ตั้งใจ
คืนค่า null เมื่อ key ไม่มีอยู่	ตรวจสอบง่ายด้วย === null ไม่ต้องจัดการ undefined แยก	นักพัฒนาที่ใช้ !value แทน === null จะแยกไม่ออกระหว่าง “ไม่มี key” กับ “ค่าที่เก็บไว้เป็น falsy”

ข้อผิดพลาดที่พบบ่อย

• เช็คค่าที่คืนมาด้วย !value แทน === null — string "null" หรือ "" เป็น falsy แต่เป็นค่าที่เก็บไว้จริง ทำให้ logic ผิดพลาด
• เรียก clear() โดยคิดว่าจะล้างเฉพาะ key ของตัวเอง — แต่ล้างทุก key บน origin นั้น รวมถึงของ library หรือสคริปต์อื่นด้วย
• สมมติว่าลำดับของ key(i) ตรงกับลำดับที่ insert — spec ไม่รับประกันลำดับนี้ ห้ามพึ่งพา index เพื่ออ้างอิงถึง key ตัวใดตัวหนึ่งโดยเฉพาะ

💡 ตัวอย่างจากของจริง

ฟอร์มยาว ๆ ที่ auto-save ฉบับร่าง — เรียก setItem แบบ debounce ทุกครั้งที่ผู้ใช้พิมพ์ แล้วใช้ getItem ตอนโหลดหน้าเพื่อกู้คืนข้อมูลที่กรอกค้างไว้ ป้องกันข้อมูลหายเมื่อ refresh

แอปที่ต้อง debug ข้อมูลใน localStorage — ใช้ length และ key(i) วน loop เพื่อ list ทุก key ที่แอปเก็บไว้ ช่วยตรวจสอบว่ามี key ขยะตกค้างจากฟีเจอร์เก่าหรือไม่

localStorage.getItem("missing-key") คืนค่าอะไรเมื่อ key นั้นไม่เคยถูกตั้งค่ามาก่อน?

undefined null "" โยน ReferenceError

คุณเรียก localStorage.setItem("x", "first") แล้วตามด้วย localStorage.setItem("x", "second") ค่าที่เก็บไว้คืออะไร?

"first" "second" "first,second" โยน error เพราะ key มีอยู่แล้ว

localStorage.key(index) คืนค่าอะไรเมื่อ index อยู่นอกช่วง?

undefined null โยน RangeError ""

method ใดที่ลบ key/value pair ทั้งหมดใน localStorage สำหรับ origin ปัจจุบัน?

localStorage.removeAll() localStorage.clear() localStorage.reset() localStorage.delete()

Submit

Mark as complete