Forum

แบ่งปัน:
การแจ้งเตือน
ลบทั้งหมด

การจัดเก็บข้อมูลในเบราเซอร์โดยไม่ต้องใช้คุ้กกี้

1 โพสต์
1 ผู้ใช้
0 Reactions
1,258 เข้าชม
nopparat.jap
(@nopparat-jap)
Trusted Member
เข้าร่วม: 5 ปี ที่ผ่านมา
กระทู้: 18
หัวข้อเริ่มต้น  

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

Web Storage API มีกลไกที่ปลอดภัยซึ่งเบราว์เซอร์สามารถจัดเก็บคู่คีย์/ค่าในรูปแบบที่ใช้งานง่ายกว่าการใช้คุกกี้

 

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

เบราว์เซอร์หลักทั้งหมดรองรับ API พื้นที่เก็บข้อมูลบนเว็บ ด้านล่างนี้คือเวอร์ชันเบราว์เซอร์ขั้นต่ําที่รองรับ WEB Storage API:

Web Storage API มี 2 คำสั่งสําหรับการบันทึกข้อมูลในเบราว์เซอร์ของเครื่อง Client 

  1. window.localStorage
  2. window.sessionStorage

ก่อนที่จะใช้ที่เก็บข้อมูลบนเว็บในเบราว์เซอร์เราสามารถตรวจสอบความเข้ากันได้ของเบราว์เซอร์และดังนี้ localStoragesessionStorage

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

 

ที่เก็บข้อมูลในเครื่อง

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

พื้นที่จัดเก็บเซสชัน

sessionStorage อ็อบเจ็กต์อนุญาตให้จัดเก็บข้อมูลในเบราว์เซอร์ของไคลเอ็นต์เป็นเวลาหนึ่งเซสชัน ข้อมูลจะถูกลบเมื่อปิดหน้าต่างเบราว์เซอร์

ทั้งสองและให้ห้าวิธีในการประมวลผลข้อมูลการจัดเก็บlocalStoragesessionStorage

  1. setItem()
  2. getItem()
  3. removeItem()
  4. clear()
  5. key()

ข้อมูลทั้งหมดจะถูกบันทึกเป็นสตริงในที่เก็บข้อมูล ถ้าเราประหยัด , .. ฯลฯ ข้อมูลเหล่านั้นควรแปลงเป็นสตริงก่อนที่จะบันทึกลงในที่เก็บข้อมูลArraysObjects

การบันทึกข้อมูลลงในที่เก็บข้อมูล

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

const age = 30;
const person = {
id: 1,
name: 'John Doe',
};
const names = ['John', 'Mike'];
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

 

แปลมาจาก Sudarshana Dayananda 


   
อ้างอิง

ทิ้งคำตอบไว้

ชื่อผู้แต่ง

อีเมลผู้เขียน

ตำแหน่ง *

 
ดูตัวอย่าง แก้ไข 0 ครั้ง บันทึกแล้ว
แบ่งปัน:
1,268,458 views since 16 August 2018