Рационально ли хранить base64 картинки в local storage?

Question

[name_is_undefined]

Я разрабатываю приложение которое включает в себя функционал по обрезанию картинок, реализованного с помощью canvas, всего в приложении этот процесс может повторяться 10-30 раз. После кропа картинки, с помощью canvas, я конвертирую её в blob canvas.toBlob(callback) и с помощью функции URL.createObjectURL(blob)), 'image/png') создаю ссылку которая хранит в себе данные о картинке. Последний шаг сделан для оптимизации, потому что как оказалось если в тег img вставить параметр src со значением base64 картинки и часто перерисовывать этот элемент, то старица начнёт заметно фризить. Всё было замечательно пока я не начал добавлять логику по сохранению состояния приложения после перезагрузки страницы. Так как я использую связку React Redux я просто сохраняю состояние приложения в localStorage, но в силу того что время жизни ObjectURL связано непосредственно с document после перезагрузки ссылки которые я хранил в стейте не хранят в себе данных о картинке. Как сохранить base64 картинки после перезагрузки страницы?

Comments

[Дмитрий Беляев]

Я бы все таки хранил в бинарном виде в indexedDB

Answer 1

[sim3x]

Нет
на 30% больше размер

Храните файл прямо на диске у пользователя

https://stackoverflow.com/questions/7951326/save-i...
https://caniuse.com/#feat=download

Comments

[Everything_is_not_so_bad]

Неизвестно как в дальнейшем будут обстоять дела с безопасностью браузеров. Так что я бы не полагался на такие хаки.

[sim3x]

Роман Мирр, я сомневаюсь, что в будущем браузеры офигеют так, что запретят сохранять из себя картинки

Answer 2

[frees2]

Собственно, почему нельзя? Раньше были страхи, мол, там места мало, на хабре пугали народ.

Но

if (localStorage.getItem('ключ') === null) {......... просто картинка  с адресом, после скобок сохранённый блок с картинкой.

Comments

[name_is_undefined]

Для 30 картинок представленных в base64 хватит?

[tyzberd]

name_is_undefined, dev-test.nemikor.com/web-storage/support-test
и прочитайте последнее примечание на странице https://developer.mozilla.org/en-US/docs/Web/API/W...

[frees2]

tyzberd, Android 7.0 2,49 М
Крохоборы! Пишут, читал, спецслужбы давят, так как не отслеживается вопрос-ответ как в куках.

Answer 3

[✭ ☭]

localStorage ограничен по времени и по размеру - для картинок не подходит
используй localforage

localStorage можно использовать для чего-то простого и неважного - например настройки приложения

Comments

[Максим]

Типа Опа любопытно! Использовали в своих проектах?

[✭ ☭]

Максим, отож