การรับ การตั้งค่า และการลบรายการ
ใช้ Web Storage API เพื่ออ่านและเขียนข้อมูล
การรับ การตั้งค่า และการลบรายการ เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
ชุดความสามารถของส่วนติดต่อพื้นที่จัดเก็บข้อมูล
ทั้ง localStorage และ sessionStorage มีวิธีการหลักสี่วิธีเหมือนกัน ได้แก่ getItem(key), setItem(key, value), removeItem(key) และ clear() ทั้งสองเป็นพื้นที่จัดเก็บข้อมูลแบบคีย์-ค่าที่เบราว์เซอร์รองรับอยู่เบื้องหลัง
setItem จัดเก็บสตริง
localStorage.setItem("theme", "dark") จะเก็บสตริงไว้ภายใต้คีย์ "theme" ทั้งคีย์และค่าต้องเป็นสตริง ค่าที่ไม่ใช่สตริงจะถูกแปลงเป็นสตริงก่อนจัดเก็บ ซึ่งอาจทำให้วัตถุและอาร์เรย์เสียรูปโดยไม่แจ้งเตือน
localStorage.setItem("theme", "dark");
localStorage.setItem("count", "42");การจัดเก็บวัตถุด้วยข้อมูลรูปแบบเจสัน
หากต้องการจัดเก็บข้อมูลแบบมีโครงสร้าง ให้แปลงเป็นอนุกรมด้วยรูปแบบเจสัน: localStorage.setItem("user", JSON.stringify(user)) จากนั้นอ่านกลับด้วย const user = JSON.parse(localStorage.getItem("user")) ควรจัดการข้อผิดพลาดจากการแปลงเสมอ เผื่อค่าที่จัดเก็บมีรูปแบบไม่ถูกต้อง
const user = { name: "Ada", age: 30 };
localStorage.setItem("user", JSON.stringify(user));
const loaded = JSON.parse(localStorage.getItem("user"));getItem ส่งคืนสตริงหรือ null
getItem("missing") จะส่งคืน null เมื่อไม่มีคีย์ดังกล่าว ไม่เคยส่งคืน undefined ให้ใช้ตัวดำเนินการรวมค่าที่ไม่ใช่ค่าว่างเพื่อกำหนดค่าเริ่มต้น: const theme = localStorage.getItem("theme") ?? "light"
ไวยากรณ์การเข้าถึงด้วยพร็อพเพอร์ตี้
คุณยังสามารถใช้รูปแบบวงเล็บเหลี่ยมและจุดได้ เช่น localStorage.theme = "dark" และ localStorage["theme"] ทั้งสองแบบใช้งานได้ แต่ทำให้เจตนาไม่ชัดเจน ควรเลือกการเรียกใช้วิธีการอย่างชัดเจน เพราะสื่อได้ตรง ๆ ว่านี่คือพื้นที่จัดเก็บข้อมูลถาวร ไม่ใช่พร็อพเพอร์ตี้ของวัตถุ
removeItem และการล้างข้อมูล
localStorage.removeItem("theme") จะลบคีย์เดียว localStorage.clear() จะลบคีย์ทั้งหมดของต้นทางปัจจุบัน การล้างข้อมูลเป็นการดำเนินการที่ทำลายข้อมูล อย่าเรียกใช้โดยไม่มีเหตุผลสำคัญ เพราะจะลบข้อมูลที่สคริปต์ทุกตัวบนหน้าเว็บกำหนดไว้
การวนดูคีย์ที่จัดเก็บไว้
ใช้ localStorage.length และ localStorage.key(index) เพื่อไล่ดูคีย์ทั้งหมดที่จัดเก็บไว้ หรือใช้การกระจายค่าจาก Object.keys(localStorage) วิธีนี้มีประโยชน์สำหรับการย้ายข้อมูล การแก้จุดบกพร่อง และการล้างข้อมูลตามคำนำหน้า เช่น การลบคีย์ทั้งหมดที่ขึ้นต้นด้วย "cache:"
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
console.log(key, localStorage.getItem(key));
}ข้อผิดพลาดเมื่อเกินโควตา
เบราว์เซอร์จัดสรรพื้นที่ประมาณ 5-10 MB ต่อต้นทาง หากใช้เกินโควตา จะเกิดข้อผิดพลาด QuotaExceededError ควรจัดการข้อผิดพลาดจากการเรียก setItem เมื่อจัดเก็บค่าที่อาจมีขนาดใหญ่ เช่น แคชรูปภาพหรือฉบับร่างเอกสาร เพื่อไม่ให้ข้อผิดพลาดทำให้แอปพลิเคชันหยุดทำงาน
try {
localStorage.setItem("draft", largeString);
} catch (e) {
if (e.name === "QuotaExceededError") {
// free space, warn user, or fall back
}
}การกำหนดขอบเขตชื่อให้คีย์
พื้นที่จัดเก็บข้อมูลใช้ร่วมกันทั้งต้นทาง ควรเติมชื่อแอปหรือฟีเจอร์ไว้หน้าคีย์ เช่น app:settings และ cart:items เพื่อหลีกเลี่ยงการชนกันกับสคริปต์อื่น ไลบรารีของบุคคลที่สาม และส่วนขยายเบราว์เซอร์ที่ทำงานอยู่ในต้นทางเดียวกัน
การทำงานแบบซิงโครนัสและการบล็อก
ส่วนติดต่อพื้นที่จัดเก็บข้อมูลทำงานแบบซิงโครนัสโดยสมบูรณ์ ทุกการเรียกใช้จะบล็อกเธรดหลักจนกว่าการรับส่งข้อมูลกับดิสก์จะเสร็จสิ้น หลีกเลี่ยงการจัดเก็บข้อมูลก้อนใหญ่หรือเรียกใช้ setItem ภายในลูปที่ทำงานถี่ ๆ ให้รวมการอัปเดตเป็นวัตถุที่แปลงเป็นอนุกรมเพียงชุดเดียวแทน
sessionStorage เทียบกับ localStorage
มีชุดความสามารถของส่วนติดต่อเหมือนกัน แต่อายุการใช้งานต่างกัน sessionStorage จะถูกล้างเมื่อปิดแท็บ ส่วน localStorage จะคงอยู่ข้ามการเริ่มเบราว์เซอร์ใหม่ เลือก sessionStorage สำหรับสถานะของตัวช่วยสร้างที่อยู่ชั่วคราว และเลือก localStorage สำหรับค่ากำหนดของผู้ใช้ที่ควรคงอยู่หลังการโหลดใหม่
ตรวจสอบความรู้
localStorage.getItem("missing-key") จะส่งคืนอะไรเมื่อไม่เคยกำหนดคีย์นี้ไว้
สรุป
getItem, setItem, removeItem และการล้างข้อมูลคือเสาหลักสี่ประการของพื้นที่จัดเก็บข้อมูลเว็บ ค่าทั้งหมดเป็นสตริง จึงควรห่อข้อมูลที่มีโครงสร้างด้วยข้อมูลรูปแบบเจสัน ควรรองรับการส่งคืนค่า null ข้อผิดพลาด QuotaExceededError และการกำหนดขอบเขตชื่อคีย์ เพื่อใช้ต้นทางร่วมกับสคริปต์อื่นอย่างเหมาะสม
คำถามที่พบบ่อย
บทเรียน “การรับ การตั้งค่า และการลบรายการ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การรับ การตั้งค่า และการลบรายการ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การรับ การตั้งค่า และการลบรายการ”
ใช้ Web Storage API เพื่ออ่านและเขียนข้อมูล คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การรับ การตั้งค่า และการลบรายการ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม
ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- localStorage เทียบกับ sessionStorage
- การรับ การตั้งค่า และการลบรายการ
- การรับฟังเหตุการณ์พื้นที่จัดเก็บข้อมูล
- ความปลอดภัย: สิ่งที่ไม่ควรจัดเก็บในพื้นที่จัดเก็บข้อมูล