Forums » Code » localStorage Plugin

Hey guys,
Been playing around with an idea we came up with at the Philly Game Jam this year and have continued to mess around with it. Needed some solution for local storage for high scores and other values, so pulled it out into a plugin.

Mostly an interface for localStorage with some error handling and convenience methods-- let me know if you have problems with anything or you'd like something to be added!

https://github.com/jsantell/ImpactStorage

High Score Example

this.storage = new ImpactStorage();
// Initialize high score as 0 if  'highScore' does not exist
this.storage.initUnset('highScore', 0);

var player = this.getEntitiesByType(EntityPlayer)[0];
/*
       Updates the value of 'highScore' if and only
       if player.score > this.storage.get('highScore')
*/
this.storage.setHighest('highScore',player.score); 

Storing JSON Objects example

this.storage = new ImpactStorage();
/*
Player's velocity is an object stored as
vel: {x: 200, y: 100}
And that data is now being stored with key playerVel in localStorage
*/
var player = this.getEntitiesByType(EntityPlayer)[0];
this.storage.set('playerVel',player.vel)

// And let's output it for fun
alert("Player's x velocity: "+this.storage.get('playerVel').x);
alert("Player's y velocity: "+this.storage.get('playerVel').y);

Okay, that's cool. MUCH better/cleaner approach than what I'd hacked together. Looking forward to using it. :)

i tried the highScore -> works like a charm!

will try the JSON storage and let u guys know

@fugufish
Glad to hear it worked for you!

@Hareesun
If you end up using it, let me know if there's anything you'd like to see added or made cleaner :)

Updated to make it more in line with other Impact plugins, i.e.

this.storage = new ig.Storage();

@jsanteil - would it be possible to do a more 'complex kind of database'?

eg: I want to save 5 different achievement badges

this is what I would envision doing ( but not do-able atm )

this.storage = new ig.Storage();

// define badges in JSON
var badge1 = {id:'badge1', title:'Badge 1', description:'Description 1'};
var badge2 = {id='badge2', title:'Badge 2', description:'Description 2'};
// analog for badge3,4 and 5

// store badges ( in this case, the entry does not get replaced, but added, like a database)
this.storage.set('badges', badge1);
this.storage.set('badges', badge2);
this.storage.set('badges', badge3);
this.storage.set('badges', badge4);
this.storage.set('badges', badge5);

// get badge1
var getBadge1 = this.storage.getById('badge1');

// get all badges
var allBadges = this.storage.get('badges');

any suggestions?

What you're asking for is possible in it's current implementation, but it'd be kind of a jackassery moving JSON objects around. Brainstorming of a way to generalize it for every use, this is a rough idea of what I could implement.

Ideally, you want an object stored like this, correct?

badges:	{
	1:	{
		id: 'badge1',
		title" 'Badge 1',
		description: 'Badge 1 Description'
	},
	2:	{
		id: 'badge2',
		title" 'Badge 2',
		description: 'Badge 2 Description'
	},
	
	//and so forth
}

I could construct it so once a variable is set, you could append (INSERT if you want to view it as a DB) additional items to the 'badges' object:

this.storage.set('badges', {});
this.storage.append('badges', badge1);
this.storage.append('badges', badge2);
this.storage.append('badges', badge3);
this.storage.append('badges', badge4);
this.storage.append('badges', badge5);

So you'd end up with the object listed above. Now to fetch the information, this wouldn't work:

var getBadge1 = this.storage.getById('badge1');

Since it's not clear what object is being searched for 'badge1'. What could be doable is this:

var badge1 = this.storage.get('badges').1

And this would return the object with the key '1' inside of the 'badges' object. Could also get the name of it via:

var badge1Name = this.storage.get('badges').1.title;

Although this work is all on you, navigating through the object. If you can think of a better and still generalized way, please tell me, just my first thought of it and I haven't had too much coffee today :)

This would still return all badges, or the original object listed at top

var allBadges = this.storage.get('badges');

Any more suggestions and I'd be glad to implement them, or ways to make using this in a more database-driven form would be great :)

@jsantell - well written! this.storage.append() should definitely be implemented in future versions. Maybe a search func as well (might be tedious though).

in the meantime i'll try

var badge1 = this.storage.get('badges').1

Well the beauty of JSON is you'd be able to get any badge by it's key, so

var badge1 = this.storage.get('badges').1
var badge1 = this.storage.get('badges')[1]

or whichever way you prefer. Searching becomes iffy since there are so many parameters (literally)--

var resultingBadges = this.storage.search('badges','title','badge 1');

The object being searched has to be specified, as well as one of the object's objects' keys (title in this case), and then what is exactly being searched for ('badge 1'). What would return if there were more than one object matching those requirements? I ask because I'm not sure if this is the best way to go about it..

Deleted because i'm idiot.. :D. Everything is working fine fo me.

Love this plugin - lightweight & elegant!

Does anyone know where localStorage stores the data?

Glad you liked it :)

localStorage is handled similarly to cookies -- the browser stores and manages them. More reads from W3C: http://dev.w3.org/html5/webstorage/

Also, just pushed a change to clean up some stuff, added a minified version, and make it safer for non-supported browsers!

https://github.com/jsantell/ImpactStorage

@jsantell nice work. if the plugin is located inside the lib/plugins directory, baking the entire game will automatically minify it.

Oh duh, it's been awhile since I've been deep in Impact :)

How does local storage work with IOS Impact?

Nice work. Many thanks for this this plugin.

i have done something similar with javascript... so maybe you can use some from them too.

var _storage = {
		LOCAL: 1,
		SESSION: 2,
		BOTH: 3,
		
		removeVars: function(data, store) {
			if(typeof data != 'object' || data.length) return false;
			if(typeof store != 'number') return false;
			for(var d in data) {
				if(store & this.SESSION) {
					sessionStorage.removeItem(d);
				}
				if(store & this.LOCAL) {
					localStorage.removeItem(d);
				}
			}
			return true;
		},
		setVars: function(data, store) {
			if(typeof data != 'object' || data.length) return false;
			if(typeof store != 'number') return false;
			for(var d in data) {
				if(store & this.SESSION) {
					sessionStorage.setItem(d,data[d]);
					//alert("session: "+d+" ("+data[d]+")");
					if(sessionStorage.getItem(d) == null) return false;
				}
				if(store & this.LOCAL) {
					localStorage.setItem(d,data[d]);
					//alert("local: "+d+" ("+data[d]+")");
					if(localStorage.getItem(d) == null) return false;
				}
			}
			return true;
		},
		getVars: function(data, store) {
			if(typeof store != 'number') return;
			if(typeof data != 'object' || data.length) return;
			for(var d in data) {
				if(store & this.SESSION) {
					data[d] = sessionStorage.getItem(d);
					//alert("get session: "+d+" ("+data[d]+")");	
					if(data[d] != null) continue;	
				}
				if(store & this.LOCAL) {
					data[d] = localStorage.getItem(d);
					//alert("get local: "+d+" ("+data[d]+")");					
				}
			}
			return data;
		}
};

_storage.setVars({score: 500, playtime: 2050}, _storage.SESSION);
var data = _storage.getVars({score: 0, playtime: 0}, _storage.SESSION);
_storage.removeVars(data, _storage.SESSION);

if SESSION var was found it wont search in LOCAL store

I tried to modify the plugin to return the loaded data in a callback but it didn't work. I requested the feature in github.

In the meantime I have a hackish setTimeout that waits a bit for the local storage to be loaded and then loads the level. It works, but is not ideal.