Cómo subir imágenes a localStorage

No puede almacenar binarios en localStorage, solo cadenas. Esto te deja con imágenes de codificación base64. Me imagino que podría hacer algo como convertir un montón de imágenes en el servidor a base64 y luego proporcionarlo como elementos en un objeto JSON:

{
“avatares”: {
“mike”: “datos: imagen / gif; base64, …”,
“jane”: “datos: imagen / png; base64, …”
},
“antecedentes”: {
“banner”: “datos: imagen / jpeg; base64, …”
},
“iconos”: {
“check”: “data: image / png; base64, …”,
“plus”: “datos: imagen / gif; base64, …”
}
}

Y luego puede iterar sobre los pares de valores clave y agregarlos a localStorage (usando Lodash: documentación de lodash):

• A medida que las aplicaciones .Net maduran / las empresas y los equipos crecen, ¿ve que los códigos y los equipos continúan beneficiándose de ORM como EF?
• ¿Una aplicación gana dinero cuando alguien la descarga? En caso afirmativo, ¿quién paga ese dinero?
• ¿Cuál es el mejor software para 'combinar correo'?
• ¿Cuáles son los últimos avances en pruebas de software?
• Cómo escribir este código en un diagrama de flujo

_.forIn (imagesJSON, function (images, category) {
_.forIn (imágenes, función (base64Image, imageKey) {
localStorage.set (category + ‘:’ + imageKey, base64Image);
});
});

Cuando desee obtener la imagen, puede hacer algo como:

var createImage = function (categoría, clave) {
var imageData = localStorage.getItem (category + ‘:’ + key);
var image = document.createElement (“img”);
image.setAttribute (‘src’, imageData);
imagen de retorno;
};

var loadImage = function (categoría, clave, devolución de llamada) {

var image = createImage (categoría, clave);

if (imagen) {
devolución de llamada (nulo, imagen);
}

// No hay datos de imagen. Tal vez lo obtienes del servidor?
// “getImageData” recupera datos de imágenes del servidor. Hazlo
// como sea que te guste.
getImageData (‘/ images / preload’, function (err, data) {
if (err) devuelve la devolución de llamada (err);
// Inténtalo de nuevo
imagen = createImage (categoría, clave);

devolución de llamada (
(imagen)? nulo: ‘No se pudo encontrar la imagen’,
imagen
);
});
};

loadImage (‘iconos’, ‘más’, función (err, imagen) {
if (err) alerta de retorno (err);
// Añádelo a DOM en alguna parte.
document.body.appendChild (imagen);
});

@ver imágenes de caché con almacenamiento local HTML5 para cargar más rápido la página

Es posible que desee considerar IndexedDB en lugar de localStorage para este caso de uso: API IndexedDB