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?
Votantes cercanos: si bien entiendo completamente cómo esto parecía "principalmente basado en la opinión" (el "vs" en la versión original no ayudó), las dos tecnologías son claramente diferentes y hay razones objetivas para elegir una sobre la otra. user221287 realizar una investigación previa mínima sobre el tema de la pregunta y obtener una comprensión básica de los conceptos involucrados antes de preguntar, lo más probable es que lo salve de votos negativos y votos cerrados en el futuro.
Yannis 01 de
Puede probar el rendimiento entre diferentes opciones de almacenamiento y en todos los navegadores aquí: nolanlawson.github.io/database-comparison (créditos para Nolan Lawson)
Lucas Basquerotto
Respuestas:
121
En la superficie, las dos tecnologías pueden parecer directamente comparables, sin embargo, si pasa un 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 exactamente Web Storage , fue diseñado para pequeñas cantidades de datos. Es esencialmente un almacenamiento de valor de clave de solo cadenas , con una API síncrona simplista . Esa última parte es 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, solicitudes de bloqueo). Incluso si no le importa utilizar una ingenua clave de almacenamiento de valores para grandes cantidades de datos, a sus clientes les importará esperar para siempre que se cargue su aplicación.
indexedDB , por otro lado, fue diseñado para trabajar con cantidades de datos significativamente mayores. Primero, en teoría, proporciona una API síncrona y 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 su nombre lo revela, proporciona índices . Puede ejecutar consultas rudimentarias en su base de datos y buscar registros buscando sus claves en rangos de claves específicos . 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 por 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 Web Storage puede acceder directamente. Si alguna vez ha trabajado con cookies, no tendrá problemas para trabajar con Web Storage. Además, en general, deberá escribir más código en indexedDB para lograr exactamente el mismo resultado que en Web Storage (y más código = más errores). Además, emular el almacenamiento web para 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 echar un vistazo a la API de cuotas .
Al final del día, depende completamente de usted si usa Web Storage o indexedDB, o ambos, en su aplicación. Un buen caso de uso para el almacenamiento web sería almacenar datos de sesión simples, por ejemplo, el nombre de un usuario, y guardar 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.
También los trabajadores de servicio pueden usar indexedDB pero no localStorage
Fabich
10
La respuesta de @yannis es excelente. Solo quiero agregar un par de cosas.
En algunas situaciones, como Service Workers, 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 (iría tan lejos como para decir "horrible", YMMV). Hay varias bibliotecas "envolventes" para simplificar la API, le sugiero encarecidamente que las consulte.
No se puede usar localStorage y el código de bloqueo, ¿no podría envolver el código de bloqueo con una Promesa y hacer que no sea de bloqueo?
joedotnot
3
Para mí, descubrí 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 y 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 decodificarlos.
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
Respuestas:
En la superficie, las dos tecnologías pueden parecer directamente comparables, sin embargo, si pasa un 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 exactamente Web Storage , fue diseñado para pequeñas cantidades de datos. Es esencialmente un almacenamiento de valor de clave de solo cadenas , con una API síncrona simplista . Esa última parte es 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, solicitudes de bloqueo). Incluso si no le importa utilizar una ingenua clave de almacenamiento de valores para grandes cantidades de datos, a sus clientes les importará esperar para siempre que se cargue su aplicación.
indexedDB , por otro lado, fue diseñado para trabajar con cantidades de datos significativamente mayores. Primero, en teoría, proporciona una API síncrona y 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 su nombre lo revela, proporciona índices . Puede ejecutar consultas rudimentarias en su base de datos y buscar registros buscando sus claves en rangos de claves específicos . 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 por 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 Web Storage puede acceder directamente. Si alguna vez ha trabajado con cookies, no tendrá problemas para trabajar con Web Storage. Además, en general, deberá escribir más código en indexedDB para lograr exactamente el mismo resultado que en Web Storage (y más código = más errores). Además, emular el almacenamiento web para 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 echar un vistazo a la API de cuotas .
Al final del día, depende completamente de usted si usa Web Storage o indexedDB, o ambos, en su aplicación. Un buen caso de uso para el almacenamiento web sería almacenar datos de sesión simples, por ejemplo, el nombre de un usuario, y guardar 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.
fuente
La respuesta de @yannis es excelente. Solo quiero agregar un par de cosas.
En algunas situaciones, como Service Workers, 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 (iría tan lejos como para decir "horrible", YMMV). Hay varias bibliotecas "envolventes" para simplificar la API, le sugiero encarecidamente que las consulte.
fuente
Para mí, descubrí 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 y 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 decodificarlos.
Cita de MDN :
Sobre IndexedDB :
fuente