Is it OK to store image blob data in localStorage?

@simon_matthewsDec 13.2022

I’m working on a site that allows users to customize photo greetings cards, much like moonpig. I’m trying to take as much load off the server as possible. It would be nice if when a user uploads an image it could be stored in localStorage instead of uploading it to the server straight away, then it could be uploaded if the user makes an order. This way only photos from cards that have been purchased will be stored on the server. This could make a huge difference in how much space the uploads take up on the server, since there’s nothing stopping users continuously uploading images without making a purchase, which would fill the server quickly.

I have extracted the image data from the FileReader and stored it in localStorage. This can then be used as the image source. It works fine, but I was wondering if this is OK or is it a no no?

to post a comment

JavaScript

10 Comments(s) _↴

@sibertDec 13.2022 — #> @simon_matthews#1649176 I have extracted the image data from the FileReader and stored it in localStorage. This can then be used as the image source. It works fine, but I was wondering if this is OK or is it a no no?

I guess that this will fill the localStorage limit of 8 MB rather quick. So I think it is more of no no...

@simon_matthewsauthorDec 13.2022 — #Ah I just realized that localStorage can only hold up to 5Mb, so it's not going to work. I forgot about that, doh.

Is there any other way to do this or do the images have to be uploaded to the server? If I could get the path of the selected image, that would work, but apparently this isn't allowed for security purposes.

@sibertDec 13.2022 — #> @simon_matthews#1649180 Is there any other way to do this or do the images have to be uploaded to the server? If I could get the path of the selected image, that would work, but apparently this isn't allowed for security purposes.

If it is uploaded to the server you get "your server path". A path to users desktop is "user local path". You may store the "user local path" in localStorage. Maybe...

@simon_matthewsauthorDec 13.2022 — #@sibert#1649181 I'm not sure you can get the user local path? I found a way of getting a temporary path, which worked but only temporarily. The data gets deleted when you refresh the page or navigate away from the page.

@sibertDec 13.2022 — #> @simon_matthews#1649183 The data gets deleted when you refresh the page or navigate away from the page

Even if you store the path in localStorage? Or sessionStorage?

@simon_matthewsauthorDec 13.2022 — #@sibert#1649184 From what I've read today, the actual image path isn't accessible at all, only the file name can be accessed. It seems a duplicate of the image is stored in a temp location as a blob. This path can be accessed but it's only good for a short period before it gets deleted.

Maybe if I limit the image file size to around 4.5Mb then there might be enough space in localStorage. The file size could decrease in relation to the amount of photos on the card, since the more photos the card has the smaller they'll have to be to fit on the card, adding to a total of 4.5Mb. So if the card template has one photo then the photo can be 4.5Mb, but if it has two photos then it's half that, and so on. That might work?

@sibertDec 14.2022 — #> @simon_matthews#1649185 Maybe if I limit the image file size to around 4.5Mb then there might be enough space in localStorage.

You may test [indexedDB](https://javascript.info/indexeddb). It seems that the only limit is the users free space on hard disk. But it seems not that simple as localStorage.

Though I find it a bit scary someone else filling up my local disc space with garbage and having no idea what is happening. :-)

@simon_matthewsauthorDec 14.2022 — #Coincidence, I was just looking into indexedDB! I guess this could cause issues when users don't have much free space. Perhaps for now I will store the uploads on the server and limit them to around 4Mb. If the uploads fill the server then the chances are I'll be making enough sales to afford more server space. I doubt that would ever be a scenario but it's good to prepare I suppose.

I'm also thinking that maybe I should stick to JSON with MySql in PHP for my variables instead of JavaScript localStorage, but I'm not so sure on that one. I already have the main customization page working with localStorage in JavaScript so it might be worth continuing with the rest of the site? My main concern with PHP and MySql is that every time a visitor clicks on 'Customize Card' a database row is created that contains all the variables, which change as the visitor edits the card, regardless of whether they purchase it or not. So if many visitors decide to mess around with the customizer there'll be a lot of database rows created all containing many JSON variables. Would this cause issues or would the server/database handle this kind of thing easily?

@sibertDec 14.2022 — #> @simon_matthews#1649207 I doubt that would ever be a scenario but it's good to prepare I suppose.

I have not tested, but there is a cheaper [image storage from Cloudflare](https://blog.cloudflare.com/announcing-cloudflare-images/). You pay as you go.

> I'm also thinking that maybe I should stick to JSON with MySql in PHP for my variables instead of JavaScript localStorage, but I'm not so sure on that one.

The JSON format is more or less standard for communication between database and web.

> I already have the main customization page working with localStorage in JavaScript so it might be worth continuing with the rest of the site? My main concern with PHP and MySql is that every time a visitor clicks on 'Customize Card' a database row is created that contains all the variables, which change as the visitor edits the card, regardless of whether they purchase it or not. So if many visitors decide to mess around with the customizer there'll be a lot of database rows created all containing many JSON variables.

There is always a dilemma which way to go. Best way depends on available time, security, speed etc. One approach is to use a separate table for "temp_customers". Move to another table when you get paid. And clear this table "temp_customers" records by a cron service after a month.

> Would this cause issues or would the server/database handle this kind of thing easily?

The standard way to store images is in the filesystem of the server. And only store the path to the image in the database. In this case there is probably no problem with either speed or size when it comes to the database. The only problem is disc space.

@pryinfestedFeb 17.2023 — #I'm also considering the possibility that I should store my variables using JSON in conjunction with MySql in PHP rather than JavaScript localStorage, but I'm not entirely certain about this choice. Since I've already got the main customization page working with localStorage in JavaScript, do you think it would be worthwhile for me to continue working on the rest of the site? My primary concern with PHP and MySql is that a row in the database is created whenever a visitor clicks on the "Customize Card" button. This row contains all of the variables, which change as the visitor edits the card. This occurs regardless of whether the visitor ultimately decides to buy the card or not. Therefore, if a large number of visitors decide to play around with the customizer, a large number of database rows will be created, each of which will contain a large number of JSON variables.

Also in #JavaScript _↴

call js Func when clicking a div [RESOLVED] String to INT Scroll Bars

Success!

Help @simon_matthews spread the word by sharing this article on Twitter...

Tweet This

Is it OK to store image blob data in localStorage?

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Is it OK to store image blob data in localStorage?

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴