Чим локальна сховище відрізняється від індексованого DB?

localStorage та indexedDB використовуються для офлайн-зберігання даних у HTML5. Які їх ключові відмінності, і який із них кращий у яких ситуаціях?

На поверхні ці дві технології можуть здатися прямо порівнянними, однак якщо ви проведете з ними деякий час, незабаром зрозумієте, що це не так. Вони були розроблені для досягнення подібної мети, зберігання на стороні клієнта, але вони підходять до вирішення цієї задачі з суттєво різних точок зору і найкраще працюють з різними обсягами даних.

localStorage, а точніше веб-сховище , було розроблено для меншої кількості даних. Це, по суті, рядкове зберігання лише з ключовими значеннями , з спрощеним синхронним API. Ця остання частина є ключовою. Хоча в специфікації немає нічого, що забороняло б асинхронне зберігання DOM, в даний час всі реалізації синхронізовані (тобто блокують запити). Навіть якщо ви не заперечували за тим, щоб використовувати накопичувач наївних ключів для більшої кількості даних, ваші клієнти будуть вічно чекати, коли ваша програма завантажиться.

З іншого боку, indexedDB був розроблений для роботи зі значно більшими обсягами даних. По-перше, теоретично він пропонує як синхронний, так і асинхронний API. На практиці, однак, всі поточні реалізації є асинхронними, і запити не блокують інтерфейс користувача від завантаження. Крім того, indexedDB, як видно з назви, надає індекси . Ви можете запускати рудиментарні запити у вашій базі даних та отримувати записи, шукаючи їхні клавіші у визначених діапазонах ключів . indexedDB також підтримує транзакції та надає прості типи (наприклад, дата).

На даний момент indexedDB може здатися найкращим рішенням для будь-якої ситуації коли-небудь. Однак існує штраф за всі його функції: У порівнянні з DOM Storage, його API досить складний. indexedDB передбачає загальне ознайомлення з поняттями бази даних, тоді як із веб-сховищем ви можете перейти прямо. Якщо ви коли-небудь працювали з файлами cookie, у вас не виникне проблем із веб-сховищем. Крім того, загалом вам потрібно буде написати більше коду в indexedDB, щоб досягти точно такого ж результату, як у веб-сховищі (і більше коду = більше помилок). Крім того, емуляція веб-сховища для браузерів, які не підтримують її, є відносно простою. За допомогою indexedDB завдання не вартувало свого часу. Нарешті, перш ніж зануритися в індексований банк, слід спочатку ознайомитися з API квот .

Зрештою, повністю залежить від вас, якщо ви використовуєте Веб-сховище або індексований ДБ або те і інше у своїй програмі. Хорошим випадком використання веб-сховища було б зберігати прості дані сеансу, наприклад ім’я користувача, та зберігати деякі запити до фактичної бази даних. З іншого боку, додаткові функції indexedDB можуть допомогти вам зберігати всі дані, необхідні для роботи програми в автономному режимі.

Відповідь @yannis відмінна. Просто хочу додати пару речей.

1. У кількох ситуаціях, як, наприклад, Service Workers, ви не можете використовувати код блокування, отже, ви не можете використовувати localStorage і повинні використовувати щось на зразок indexedDB.

2. API для indexedDB є складним і стомлюючим (я б хотів сказати "жахливий", YMMV). Для спрощення API існує декілька "обгорткових" бібліотек, я настійно пропоную переглянути ці.

Для мене я виявив, що я можу зберігати краплі в IndexedDB, тоді як у localStorage я можу зберігати лише рядки. Це означає, що IndexdDB краще для бінарних даних, таких як зображення, аудіо та відео. Так, ми можемо зберігати зображення в base64 в localStorage, але краплі будуть меншими та швидшими, оскільки нам не потрібно їх розшифровувати.

Цитата від 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