localStorage เทียบกับ sessionStorage
เลือกอายุการจัดเก็บที่เหมาะสม
localStorage เทียบกับ sessionStorage เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
ที่เก็บสองแบบ ส่วนติดต่อเดียวกัน
localStorage และ sessionStorage ใช้เมธอดเหมือนกันทุกประการ ความแตกต่างคือ lifetime หรือระยะเวลาที่ข้อมูลยังคงอยู่
localStorage คงอยู่ถาวร
ข้อมูลใน localStorage จะคงอยู่จนกว่าจะถูกลบโดยเฉพาะ ข้อมูลยังอยู่หลังโหลดหน้าใหม่ ปิดแท็บ และเริ่มเบราว์เซอร์ใหม่
localStorage.setItem("theme", "dark");
// Still there days later, after closing the browsersessionStorage เป็นข้อมูลชั่วคราว
ข้อมูลใน sessionStorage จะคงอยู่เฉพาะช่วง เซสชันของแท็บ เมื่อปิดแท็บ ข้อมูลจะถูกล้าง
sessionStorage.setItem("step", "2");
// Gone once the tab is closedการแยกข้อมูลระหว่างแท็บ
แท็บเบราว์เซอร์แต่ละแท็บจะมี sessionStorage ของตนเอง แท็บสองแท็บของเว็บไซต์เดียวกันมีที่เก็บเซสชันแยกกัน และจะ NOT ใช้ข้อมูลร่วมกัน
localStorage ใช้ร่วมกัน
ในทางตรงกันข้าม แท็บและหน้าต่างทั้งหมดของต้นทางเดียวกันจะใช้ localStorage ชุดเดียวกัน การเขียนข้อมูลในแท็บหนึ่งจึงมองเห็นได้จากแท็บอื่น
พฤติกรรมเมื่อโหลดใหม่
การโหลดหน้าใหม่ตามปกติจะเก็บ sessionStorage ของแท็บนั้นไว้ การทำสำเนาแท็บอาจคัดลอกเซสชันไปด้วย แต่การเปิดแท็บใหม่จะเริ่มต้นโดยไม่มีข้อมูล
sessionStorage.setItem("draft", text);
// Survives F5 reload in the same tabการเลือกระหว่างสองแบบ
ใช้ localStorage สำหรับการตั้งค่าที่ต้องการเก็บไว้นาน (ธีม ภาษา) ใช้ sessionStorage สำหรับสถานะชั่วคราวเฉพาะแท็บ (ขั้นตอนหนึ่งของตัวช่วยสร้าง หรือร่างแบบฟอร์มที่ใช้ครั้งเดียว)
ข้อควรระวังด้านความปลอดภัย
ที่เก็บทั้งสองแบบไม่ปลอดภัย สคริปต์ใด ๆ ในหน้าสามารถอ่านข้อมูลได้ ดังนั้นอย่าเก็บรหัสผ่านหรือโทเค็นที่มีความละเอียดอ่อนและควรเก็บเป็นความลับ
เมธอดเหมือนกันทุกที่
เนื่องจากส่วนติดต่อโปรแกรมเหมือนกัน คุณจึงสลับใช้ที่เก็บหนึ่งแทนอีกที่เก็บได้โดยเปลี่ยนเฉพาะชื่อวัตถุ โค้ดที่เขียนให้ใช้ที่เก็บหนึ่งจะทำงานกับอีกที่เก็บได้
const store = useSession ? sessionStorage : localStorage;
store.setItem("k", "v");การเรียกดูเว็บแบบส่วนตัว
ในโหมดส่วนตัวหรือโหมดไม่ระบุตัวตน โดยทั่วไปที่เก็บทั้งสองแบบจะถูกล้างเมื่อเซสชันสิ้นสุด และเบราว์เซอร์บางตัวอาจจำกัดหรือปิดใช้งานที่เก็บเหล่านี้ ควรจัดการกรณีที่การเขียนข้อมูลล้มเหลวไว้เสมอ
try {
localStorage.setItem("k", "v");
} catch (e) {
console.log("storage unavailable");
}โควตาแยกจากกัน
ที่เก็บแต่ละแบบมีโควตาของตนเอง (โดยทั่วไปประมาณ 5MB ต่อต้นทาง) การเติมข้อมูลใน sessionStorage จะไม่ใช้โควตาของ localStorage
ตรวจสอบความเข้าใจ
การเปรียบเทียบที่เก็บสองแบบ
สรุป
ที่เก็บทั้งสองแบบใช้ส่วนติดต่อโปรแกรมเดียวกัน แต่มี lifetime ต่างกัน localStorage คงอยู่ข้ามเซสชันและใช้ร่วมกันในทุกแท็บของต้นทาง ส่วน sessionStorage มีอยู่เฉพาะเซสชันของแท็บเดียวและแยกตามแท็บ ที่เก็บทั้งสองแบบไม่ปลอดภัย และแต่ละแบบมีโควตาของตนเองประมาณ 5MB
คำถามที่พบบ่อย
บทเรียน “localStorage เทียบกับ sessionStorage” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “localStorage เทียบกับ sessionStorage” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “localStorage เทียบกับ sessionStorage”
เลือกอายุการจัดเก็บที่เหมาะสม คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “localStorage เทียบกับ sessionStorage” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การจัดเก็บและอ่านข้อมูล
- localStorage เทียบกับ sessionStorage
- การจัดเก็บออบเจ็กต์ด้วย JSON
- เหตุการณ์และข้อจำกัดของพื้นที่จัดเก็บ