Sign in to follow this  
weratius

IndexedDB and LocalStorage in Phaser

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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 

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.