วิธีใช้ localStorage ใน JavaScript - การเขียนโปรแกรม

กลไก localStorage จัดเตรียมประเภทของอ็อบเจ็กต์การจัดเก็บเว็บที่ให้คุณจัดเก็บและดึงข้อมูลในเบราว์เซอร์ คุณสามารถจัดเก็บและเข้าถึงข้อมูลได้โดยไม่หมดอายุ ข้อมูลจะพร้อมใช้งานแม้หลังจากที่ผู้เข้าชมปิดไซต์ของคุณ

โดยปกติคุณจะเข้าถึง localStorage โดยใช้ JavaScript ด้วยโค้ดเพียงเล็กน้อย คุณสามารถสร้างโปรเจ็กต์ตัวอย่างได้ เช่น ตัวนับคะแนน นี่จะแสดงวิธีที่คุณสามารถจัดเก็บและเข้าถึงข้อมูลถาวรโดยใช้โค้ดฝั่งไคลเอ็นต์เท่านั้น

localStorage ใน JavaScript คืออะไร?

ออบเจ็กต์ localStorage เป็นส่วนหนึ่งของ API การจัดเก็บเว็บที่เว็บเบราว์เซอร์ส่วนใหญ่รองรับ คุณจัดเก็บข้อมูลเป็นคู่คีย์-ค่าได้โดยใช้ localStorage คีย์และค่าที่ไม่ซ้ำควรอยู่ในรูปแบบสตริง UTF-16 DOM

หากคุณต้องการเก็บอ็อบเจ็กต์หรืออาร์เรย์ คุณจะต้องแปลงเป็นสตริงโดยใช้ JSON.stringify() กระบวนการ. คุณสามารถจัดเก็บข้อมูลได้สูงสุด 5MB ใน localStorage นอกจากนี้ หน้าต่างทั้งหมดที่มีที่มาเดียวกันสามารถแชร์ข้อมูล localStorage ของไซต์นั้นได้

เบราว์เซอร์จะไม่ลบข้อมูลนี้แม้ว่าผู้ใช้จะปิดลงก็ตาม จะพร้อมใช้งานในเว็บไซต์ที่สร้างในระหว่างเซสชันในอนาคต อย่างไรก็ตาม คุณไม่ควรใช้ localStorage สำหรับข้อมูลที่ละเอียดอ่อน เนื่องจากสคริปต์อื่นๆ ที่ทำงานบนหน้าเดียวกันสามารถเข้าถึงได้

localStorage กับ sessionStorage

ดิ localStorage และ sessionStorage ออบเจ็กต์เป็นส่วนหนึ่งของ Web Storage API ที่เก็บคู่คีย์-ค่าไว้ในเครื่อง เบราว์เซอร์ที่ทันสมัยทั้งหมดรองรับทั้งคู่ ด้วย localStorage ข้อมูลจะไม่หมดอายุแม้ว่าผู้ใช้จะปิดเบราว์เซอร์ก็ตาม ซึ่งแตกต่างจาก sessionStorage ซึ่งจะล้างข้อมูลเมื่อเซสชันของเพจสิ้นสุดลง เซสชันของหน้าจะสิ้นสุดลงเมื่อคุณปิดแท็บหรือหน้าต่าง