if (typeof Storage !== 'undefined') {
   // Support Web Storage API
} else {
   // No support
}

const age = 30;
const person = {
  id: 1,
  name: 'John Doe',
};
const names = ;sessionStorage.setItem('age', age);
localStorage.setItem('person', JSON.stringify(person));
localStorage.setItem('names', JSON.stringify(names));

การดึงข้อมูลจากที่เก็บข้อมูล

ข้อมูลที่เก็บไว้สามารถดึงมาจากการจัดเก็บโดยใช้วิธีการ เมธอดยอมรับพารามิเตอร์หนึ่งตัว: คีย์และค่าที่เกี่ยวข้องกับคีย์นั้นจะถูกส่งกลับ getItem()getItem()

ดึงอ็อบเจ็กต์ที่เราบันทึกไว้ในตัวอย่างโค้ดข้างต้นโดยใช้คีย์ personperson

localStorage.getItem('person');
// "{"id":1,"name":"John Doe"}"

เนื่องจากข้อมูลที่ดึงมาเป็นสตริงเราจึงจําเป็นต้องส่งต่อไปยังวัตถุก่อนที่จะเข้าถึงคุณสมบัติของ JSONperson

const result = localStorage.getItem('person');
const person = JSON.parse(result);
console.log(person.name); // John Doe

การลบข้อมูลออกจากที่เก็บข้อมูล

ข้อมูลที่เก็บไว้สามารถลบได้โดยใช้วิธีการ เมธอดยอมรับพารามิเตอร์หนึ่งตัว: คีย์และค่าที่เกี่ยวข้องกับคีย์นั้นจะถูกลบออกจากที่เก็บข้อมูลหากมีอยู่ วิธีนี้จะไม่ทําอะไรเลยหากไม่มีรายการใดเชื่อมโยงกับคีย์ที่กําหนด removeItem() removeItem()

age จากและจากที่สามารถลบออกได้ดังนี้ sessionStoragepersonlocalStorage

sessionStorage.removeItem('age');
localStorage.removeItem('person');

ลบข้อมูลทั้งหมดออกจากที่เก็บข้อมูล

ข้อมูลที่เก็บไว้ทั้งหมดสามารถลบได้โดยใช้วิธีการ วิธีนี้เมื่อเรียกใช้จะล้างพื้นที่เก็บข้อมูลทั้งหมดของระเบียนทั้งหมดสําหรับโดเมนนั้น ไม่ได้รับพารามิเตอร์ใด ๆclear()

sessionStorage.clear();
localStorage.clear();

รับชื่อของคีย์ในตําแหน่งเฉพาะของอ็อบเจ็กต์ที่เก็บข้อมูล

วิธีนี้ช่วยให้ได้รับชื่อของคีย์ วิธีการยอมรับหนึ่งพารามิเตอร์: ตัวเลขซึ่งเป็นดัชนีของรายการเฉพาะในอ็อบเจ็กต์การจัดเก็บ key()

localStorage.key(index)

วิธีนี้มีประโยชน์ในสถานการณ์ที่เราจําเป็นต้องวนซ้ําผ่านคีย์ของอ็อบเจ็กต์การจัดเก็บและอนุญาตให้ส่งตัวเลขหรือดัชนีไปยังหรือเพื่อดึงชื่อของคีย์ key()localStoragesessionStorage

มันใช้งานง่าย Storage Web API และง่ายต่อการใช้งานในทางที่ผิดเช่นกัน

และมีข้อ จํากัด ดังต่อไปนี้localStoragesessionStorage

• ไม่สามารถใช้แทนฐานข้อมูลบนเซิร์ฟเวอร์ได้เนื่องจากข้อมูลจะถูกเก็บไว้ในเบราว์เซอร์เท่านั้น
• พื้นที่เก็บข้อมูลจํากัดไว้ที่ 5MB ในเบราว์เซอร์หลักๆ ทั้งหมด
• ที่เก็บข้อมูลเป็นแบบซิงโครนัสซึ่งหมายความว่าการดําเนินการแต่ละครั้งที่เรียกว่าจะดําเนินการทีละรายการเท่านั้น

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

บทสรุป

localStorageและทั้งสองอนุญาตให้จัดเก็บข้อมูลในเบราว์เซอร์ของผู้ใช้ อย่างไรก็ตาม ข้อมูลที่เก็บไว้ในอ็อบเจ็กต์จะถูกลบออกหลังจากปิดหน้าต่าง/แท็บของเบราว์เซอร์ อย่างไรก็ตามข้อมูลจะไม่ถูกลบหลังจากปิดเบราว์เซอร์และข้อมูลเหล่านั้นจะถูกเก็บไว้สําหรับเซสชันในอนาคต sessionStoragesession StoragelocalStorage