การจัดเก็บและอ่านข้อมูล
ใช้ setItem, getItem และ removeItem
การจัดเก็บและอ่านข้อมูล เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
พื้นที่จัดเก็บคู่คีย์-ค่าในเบราว์เซอร์
พื้นที่จัดเก็บเว็บ มอบที่เก็บคู่คีย์-ค่าอย่างง่ายในเบราว์เซอร์ให้แต่ละต้นทาง ส่วนติดต่อสองแบบคือ localStorage และ sessionStorage ใช้เมธอดเดียวกันและจัดเก็บเฉพาะสตริง
การเขียนด้วย setItem
บันทึกค่าด้วย setItem(key, value) อาร์กิวเมนต์ทั้งสองต้องเป็นสตริง
localStorage.setItem("theme", "dark");
localStorage.setItem("username", "ada");การอ่านด้วย getItem
ดึงค่าด้วย getItem(key) หากไม่มีคีย์ดังกล่าว เมธอดจะส่งคืน null ไม่ใช่ undefined
const theme = localStorage.getItem("theme"); // "dark"
const missing = localStorage.getItem("nope"); // nullการเข้าถึงคุณสมบัติ
คุณยังสามารถอ่านและเขียนในลักษณะเดียวกับคุณสมบัติของวัตถุได้ แต่รูปแบบเมธอดชัดเจนกว่าและหลีกเลี่ยงการชนกับชื่อที่มีมาให้ในตัว ควรเลือกใช้เมธอด
localStorage.theme = "light"; // works
console.log(localStorage.theme); // "light"การลบรายการเดียว
ลบรายการเดียวด้วย removeItem(key) การลบคีย์ที่ไม่มีอยู่ไม่ก่อให้เกิดผลเสียและไม่ทำอะไร
localStorage.removeItem("username");การล้างข้อมูลทั้งหมด
clear() จะล้างคีย์ทั้งหมดของต้นทางปัจจุบัน ควรใช้อย่างระมัดระวัง เพราะไม่สามารถเลิกทำได้
localStorage.clear();ทุกอย่างเป็นสตริง
พื้นที่จัดเก็บเก็บได้เฉพาะสตริง ตัวเลขและค่าบูลีนจะถูกแปลงเป็นข้อความ เมื่ออ่านกลับมา ค่าจะยังเป็นสตริงและต้องแปลงตามความจำเป็น
localStorage.setItem("count", 5);
const n = localStorage.getItem("count"); // "5" (string)
const num = Number(n); // 5การนับคีย์
คุณสมบัติ length บอกจำนวนคีย์ที่จัดเก็บไว้ และ key(index) ส่งคืนชื่อคีย์ ณ ตำแหน่งนั้น ซึ่งมีประโยชน์สำหรับการวนซ้ำ
console.log(localStorage.length);
const firstKey = localStorage.key(0);การวนดูข้อมูลในพื้นที่จัดเก็บ
วนดูคีย์ที่จัดเก็บทั้งหมดโดยใช้จำนวนรายการและตำแหน่งของคีย์ แล้วอ่านค่าแต่ละรายการไปพร้อมกัน
for (let i = 0; i < localStorage.length; i++) {
const k = localStorage.key(i);
console.log(k, localStorage.getItem(k));
}การตรวจสอบการมีอยู่
เนื่องจากคีย์ที่ไม่มีอยู่จะส่งคืน null คุณจึงตรวจสอบการมีอยู่ได้ด้วยการเปรียบเทียบอย่างง่าย
if (localStorage.getItem("token") !== null) {
console.log("user has a token");
}เฉพาะต้นทางเดียวกัน
พื้นที่จัดเก็บจำกัดขอบเขตตามต้นทาง (โครงร่าง + โฮสต์ + พอร์ต) เว็บไซต์หนึ่งไม่สามารถอ่านพื้นที่จัดเก็บของอีกเว็บไซต์ได้ และ http กับ https ถือเป็นต้นทางคนละแห่ง
ตรวจสอบความเข้าใจ
การอ่านและเขียนพื้นที่จัดเก็บเว็บ
สรุป
พื้นที่จัดเก็บเว็บคือที่เก็บคู่คีย์-ค่าสตริงแยกตามต้นทาง ใช้ setItem, getItem (ส่งคืน null หากไม่มีค่า), removeItem และ clear วนดูข้อมูลด้วย length และ key(i) ทุกอย่างเป็นสตริง ดังนั้นต้องแปลงชนิดข้อมูลด้วยตนเอง และพื้นที่จัดเก็บจะแยกจากกันตามต้นทาง
คำถามที่พบบ่อย
บทเรียน “การจัดเก็บและอ่านข้อมูล” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การจัดเก็บและอ่านข้อมูล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การจัดเก็บและอ่านข้อมูล”
ใช้ setItem, getItem และ removeItem คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การจัดเก็บและอ่านข้อมูล” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การจัดเก็บและอ่านข้อมูล
- localStorage เทียบกับ sessionStorage
- การจัดเก็บออบเจ็กต์ด้วย JSON
- เหตุการณ์และข้อจำกัดของพื้นที่จัดเก็บ