localStorage e indexedDB se utilizan para el almacenamiento fuera de línea de datos en HTML5. ¿Cuáles son sus diferencias clave y cuál es preferible en qué situaciones?
localStorage e indexedDB se utilizan para el almacenamiento fuera de línea de datos en HTML5. ¿Cuáles son sus diferencias clave y cuál es preferible en qué situaciones?
En la superficie, las dos tecnologías pueden parecer directamente comparables, sin embargo, si pasa algo de tiempo con ellas, pronto se dará cuenta de que no lo son. Fueron diseñados para lograr un objetivo similar, el almacenamiento del lado del cliente, pero abordan la tarea en cuestión desde perspectivas significativamente diferentes y funcionan mejor con diferentes cantidades de datos.
localStorage, o más precisamente Web Storage , fue diseñado para cantidades más pequeñas de datos. Básicamente, se trata de una cadena solo para almacenamiento de valor , con una API síncrona simplista. Esa última parte es la clave. Aunque no hay nada en la especificación que prohíba un almacenamiento DOM asíncrono, actualmente todas las implementaciones son síncronas (es decir, bloqueando solicitudes). Incluso si no le importó utilizar un almacenamiento de valor clave ingenuo para grandes cantidades de datos, a sus clientes les importará esperar para siempre la carga de su aplicación.
indexedDB , por otra parte, fue diseñado para trabajar con cantidades de datos significativamente mayores. Primero, en teoría, proporciona tanto una API síncrona como una asíncrona. Sin embargo, en la práctica, todas las implementaciones actuales son asíncronas y las solicitudes no bloquearán la carga de la interfaz de usuario. Además, indexedDB, como el nombre lo revela, proporciona índices . Puede ejecutar consultas rudimentarias en su base de datos y obtener registros buscando sus claves en rangos específicos de . indexedDB también admite transacciones y proporciona tipos simples (por ejemplo, fecha).
En este punto, indexedDB puede parecer la solución superior para cada situación. Sin embargo, hay una penalización para todas sus características: en comparación con el Almacenamiento DOM, su API es bastante complicada. indexedDB asume una familiaridad general con los conceptos de la base de datos, mientras que con el Almacenamiento DOM puede saltar directamente. Si alguna vez ha trabajado con cookies, no tendrá ningún problema al trabajar con el Almacenamiento DOM. Además, en general, deberá escribir más código en indexedDB para lograr exactamente el mismo resultado que en DOM Storage (y más código = más errores). Además, emular el Almacenamiento DOM para los navegadores que no lo admiten es relativamente sencillo. Con indexedDB, la tarea no valdría la pena. Por último, antes de sumergirse en indexedDB, primero debe consultar API de cuotas .
Al final del día, depende completamente de usted si utiliza DOM Storage o indexedDB, o ambos, en su aplicación. Un buen caso de uso para DOM Storage sería almacenar datos de sesión simples, por ejemplo, el nombre de un usuario, y guardarle algunas solicitudes en su base de datos real. Las características adicionales de indexedDB, por otro lado, podrían ayudarlo a almacenar todos los datos que necesita para que su aplicación funcione sin conexión.
La respuesta de @yannis es excelente. Solo quiero agregar un par de cosas.
En algunas situaciones, como los Trabajadores de servicio, no puede usar el código de bloqueo, por lo tanto, no puede usar localStorage, y debe usar algo como indexedDB.
La API para indexedDB es compleja y tediosa (me atrevería a decir "horrible", YMMV). Hay varias bibliotecas "de envoltura" para simplificar la API, le recomiendo con firmeza que las mire.
Para mí, encontré que puedo almacenar blobs en IndexedDB, mientras que en LocalStorage solo puedo almacenar cadenas. Significa que IndexdDB es mejor para datos binarios como imágenes, audio, video. Sí, podemos almacenar imágenes en base64 en localStorage, pero los blobs serán más pequeños y más rápidos porque no necesitamos descodificarlos.
Cita de MDN :
The keys and the values are always strings.
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
LocalStorage utiliza el nombre de archivo estático para indexar la base de datos y localStorage presenta ese valor como una versión extendida de una base de datos normal. La clave de su base de datos depende de esa base de datos, mientras que indexedDB selecciona el archivo de compensación que contiene los datos de la tabla sin realizar ningún cambio específico. Para comparación y comparación Ambos índices generan hechos de nodo que son verificados y tratados por concurrencia y registro distribuido. El módulo... Lee mas