Is it rational to store base64 images in local storage?

Question

JavaScript

I am developing an application that includes functionality for cropping images implemented using canvas, in total this process can be repeated 10-30 times in the application. After cropping the image, using canvas, I convert it to a blob canvas.toBlob(callback) and using the function URL.createObjectURL(blob)), 'image/png')I create a link that stores the data about the picture. The last step was made for optimization, because as it turned out, if you insert the src parameter with the base64 value of the image into the img tag and often redraw this element, the old page will noticeably freeze. Everything was great until I started adding logic to save the state of the application after reloading the page. Since I use the React Redux bundle, I simply save the application state in localStorage, but due to the fact that the lifetime of the ObjectURL is associated directly with the document, after reloading the links that I stored in the state, they do not store image data in themselves. How to save base64 images after page reload?

Answer 1

No
30% more size
Store the file directly on the user's disk
https://stackoverflow.com/questions/7951326/save-i...
https://caniuse.com/#feat=download

Answer 2

Actually, why not? Previously, there were fears, they say, there is not enough space there, people were scared on the habré.
But

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

Answer 3

localStorage is limited in time and size - not suitable for images,
use localforage
localStorage can be used for something simple and unimportant - like application settings