localStorage แตกต่างจาก indexedDB อย่างไร

localStorage และ indexedDB ใช้สำหรับการจัดเก็บข้อมูลออฟไลน์ใน HTML5 ความแตกต่างที่สำคัญของพวกเขาคืออะไรและอันไหนดีกว่าในสถานการณ์ใด

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

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

indexedDBตรงกันข้ามได้รับการออกแบบมาเพื่อทำงานกับข้อมูลจำนวนมาก ครั้งแรกในทางทฤษฎีมันมีทั้งแบบซิงโครนัสและแบบอะซิงโครนัส API อย่างไรก็ตามในทางปฏิบัติการนำไปใช้ทั้งหมดในปัจจุบันเป็นแบบอะซิงโครนัสและคำขอจะไม่บล็อกส่วนต่อประสานผู้ใช้จากการโหลด นอกจากนี้ IndexedDB เป็นชื่อที่เผยให้ดัชนี คุณสามารถเรียกใช้คำสั่งพื้นฐานในฐานข้อมูลของคุณและดึงข้อมูลบันทึกโดยการมองหากุญแจของพวกเขาในเฉพาะช่วงที่สำคัญ indexedDB ยังรองรับการทำธุรกรรมและให้ประเภทที่เรียบง่าย (เช่นวันที่)

ณ จุดนี้ indexedDB อาจดูเหมือนเป็นทางออกที่เหนือกว่าสำหรับทุกสถานการณ์ อย่างไรก็ตามมีบทลงโทษสำหรับฟีเจอร์ทั้งหมด: เมื่อเทียบกับ DOM Storage API ของมันค่อนข้างซับซ้อน indexedDB ถือว่าเป็นความคุ้นเคยทั่วไปกับแนวคิดของฐานข้อมูลในขณะที่ Web Storage คุณสามารถข้ามไปได้ทันทีหากคุณเคยทำงานกับคุกกี้คุณจะไม่มีปัญหาในการทำงานกับ Web Storage นอกจากนี้โดยทั่วไปคุณจะต้องเขียนโค้ดเพิ่มเติมใน indexedDB เพื่อให้ได้ผลลัพธ์เช่นเดียวกับในที่เก็บข้อมูลบนเว็บ (และโค้ดเพิ่มเติม = ข้อบกพร่องมากขึ้น) นอกจากนี้การเลียนแบบ Web Storage สำหรับเบราว์เซอร์ที่ไม่รองรับนั้นค่อนข้างตรงไปตรงมา ด้วย indexedDB งานจะไม่คุ้มค่ากับเวลา สุดท้ายก่อนที่คุณจะดำดิ่งลงสู่ indexedDB คุณควรดูQuota APIก่อน

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

@ yannis คำตอบนั้นยอดเยี่ยม แค่ต้องการเพิ่มบางสิ่ง

1. ในบางสถานการณ์เช่น Service Workers คุณไม่สามารถใช้รหัสการบล็อกดังนั้นคุณไม่สามารถใช้ localStorage และต้องใช้บางอย่างเช่น indexedDB

2. API สำหรับ indexedDB นั้นซับซ้อนและน่าเบื่อ (ฉันจะพูดว่า "น่ากลัว", YMMV) มีหลายไลบรารี "wrapper" เพื่อทำให้ API ง่ายขึ้นฉันขอแนะนำให้คุณดู

สำหรับฉันฉันพบว่าฉันสามารถเก็บblobsใน IndexedDB ในขณะที่ localStorage ฉันสามารถเก็บสตริงเท่านั้น มันหมายความว่า IndexdDB นั้นดีกว่าสำหรับข้อมูลไบนารีเช่นรูปภาพ, เสียง, วิดีโอ ใช่เราสามารถเก็บภาพใน base64 ใน localStorage แต่ blobs จะเล็กลงและเร็วขึ้นเพราะเราไม่จำเป็นต้องถอดรหัสมัน

ขอบคุณจากMDN :

The keys and the values are always strings.

เกี่ยวกับ IndexedDB :

Any objects supported by the structured clone algorithm can be stored:  
All primitive types However not symbols
Boolean object   
String object    
Date     
RegExp  The lastIndex field is not preserved.
Blob     
File     
FileList     
ArrayBuffer  
ArrayBufferView This basically means all typed arrays like Int32Array etc.
ImageData    
Array    
Object  This just includes plain objects (e.g. from object literals)
Map  
Set