IndexedDB and LocalStorage in Phaser

[weratius]

Hello, guys!

I'm looking for an answer how it's better to store image data when I use Phaser: via localStorage or via IndexedDB? 

I have looked through some articles and made a conclusion that IndexedDB suits better, but how can I get images from it via Phaser?

Thank you in advance!

[mattstyles]

I might be wrong but I dont think there is anything specific in Phaser to help access storage.

You can encode an image (there are a couple of ways) and stuff that into storage, then create an image from that encoding/blob/base64/array. I have an example of creating an image from a blob of image data in the commented out section here. I can't remember exactly how it happens under the hood, something to do with base64 encoding the image data and creating the image object from that, a simple google search should throw up loads of answers.

Financial times did something pretty high profile using this method to get offline support, they used localStorage as IndexedDB (particularly at the time) support was/is flaky cross-browser. Obviously there are limits on the amount of data you can store, particularly cross-browser, but you're fairly limited on options to do this anyway.

What's your use-case? offline? it might help you get better answers

[Jackolantern]

I think indexedDB support still is fairly flaky, especially in Safari. You can see a good compatibility table here: http://caniuse.com/#search=indexeddb 

There are some libraries out there that can make localStorage more like a database. LocalStorageDb is a pretty neat one. TaffyDB is another one. Both of these make localStorage feel kind of like MongoDB or CouchDB, and localStorage is very well-supported among current mobile and desktop browsers: CanIUse Web Storage.

However, you will start to use up space very fast trying to encode and store images in it. In most browsers, once you run out of web storage space, the user is prompted to offer you more space. Most users have not seen this message before and many will likely be scared-off or confused by it, so it is best to avoid it at all costs. 

As Mattstyles asked, if we knew your use-case, there may be a better way, because I think encoding and storing the images in any kind of storage is going to fill up fast.

[weratius]

On 23.01.2016 at 4:18 PM, mattstyles said:

I might be wrong but I dont think there is anything specific in Phaser to help access storage.

You can encode an image (there are a couple of ways) and stuff that into storage, then create an image from that encoding/blob/base64/array. I have an example of creating an image from a blob of image data in the commented out section here. I can't remember exactly how it happens under the hood, something to do with base64 encoding the image data and creating the image object from that, a simple google search should throw up loads of answers.

Financial times did something pretty high profile using this method to get offline support, they used localStorage as IndexedDB (particularly at the time) support was/is flaky cross-browser. Obviously there are limits on the amount of data you can store, particularly cross-browser, but you're fairly limited on options to do this anyway.

What's your use-case? offline? it might help you get better answers

I'm developing an online game and there are a lot of image data (~150mb)

My game loads too long, that's why I wanted to minimize time costs 

[chg]

28 minutes ago, weratius said:

I'm developing an online game and there are a lot of image data (~150mb)

My game loads too long, that's why I wanted to minimize time costs 

My gosh, isn't it better just to let normal caching handle that?

[mattstyles]

Static assets and application cache might suit.

It's a vipers nest though.

http://alistapart.com/article/application-cache-is-a-douchebag

http://www.html5rocks.com/en/tutorials/offline/quota-research/

 

[drhayes]

localStorage caps at around 5 megs, so it's not an option at all. And I wouldn't shove that much data into IndexedDB either, especially not as (likely) a base64 encoded string or anything.

Your best bet would be to get a really good CDN like akamai, cloudflare, cloudfront and let the browser cache do its thing. The engineering effort is already there, don't try and re-implement it some other way.

Does your game require 150 megs of assets before anything gets displayed at all? Isn't there some way to incrementally load them?

[weratius]

On 25.01.2016 at 6:43 PM, drhayes said:

localStorage caps at around 5 megs, so it's not an option at all. And I wouldn't shove that much data into IndexedDB either, especially not as (likely) a base64 encoded string or anything.

Your best bet would be to get a really good CDN like akamai, cloudflare, cloudfront and let the browser cache do its thing. The engineering effort is already there, don't try and re-implement it some other way.

Does your game require 150 megs of assets before anything gets displayed at all? Isn't there some way to incrementally load them?

No, not at all, of course.

For example: I load only planet resources whether the user is on planet, then I load space resources whether the user takes off the planet.

Also I load resources of an interface when the user opens it, i.e user clicks profile interface, browser loads it's resources at first and then opens it.

Is it ok whether I use game.cache.addImage(....) ? will that help?

Thank you for your answers, guys!

[weratius]

On 25.01.2016 at 6:43 PM, drhayes said:

localStorage caps at around 5 megs, so it's not an option at all. And I wouldn't shove that much data into IndexedDB either, especially not as (likely) a base64 encoded string or anything.

Your best bet would be to get a really good CDN like akamai, cloudflare, cloudfront and let the browser cache do its thing. The engineering effort is already there, don't try and re-implement it some other way.

Does your game require 150 megs of assets before anything gets displayed at all? Isn't there some way to incrementally load them?

That worked really great for me, I used CloudFlare...it's awesome

[drhayes]

Glad to help. ( =