Save key=>value style with ngStorage/localstorage

In my Ionic app I've added the plugin 'ngStorage' and it comes with a little demo code:

var add = function (thing) {
    $localStorage.things.push(thing);
}

This works exactly as told. I add("foo") it, and do getAll() and the value is there. I remove the add(), but keep the getAll(), I still have the value "foo" (as expected).

This isn't very usefull for me, I want to access it with keys, so I've made the following:

var addByKey = function (key, value) {
    $localStorage.things[key] = value;
    // Or, I've also tried:
    $localStorage.things.key  = value;
}

When I do the addByKey("foo","bar") and then the getAll() I get the values exactly as I want. When I remove the addByKey() and reload, I expect it to still remember the set information, but it doesn't exist. However, the first attempt via the add() function still exists, "foo" is still there (meaning the array doesnt reset).

How do I make a key->value type of structure?

---

In case it's usefull:

.factory ('StorageService', function ($localStorage) {
    $localStorage = $localStorage.$default({
        things: []
    });
    var _getAll = function () {
        return $localStorage.things;
    };

    var _add = function (thing) {
        $localStorage.things.push(thing);
    }
    var _addByKey = function (thing, value) {
        $localStorage.things[key] = value;
        // Or, I've also tried:
        $localStorage.things.key  = value;
    }

    return {
        getAll: _getAll,
        add: _add,
        addByKey: _addByKey
    };
})

Assuming that you want a key value storage system you can simply use an object instead of an array so that every key can be set as a property of this object.

.factory('StorageService', function($localStorage) {
    $localStorage = $localStorage.$default({
        things: {}
    });

    var _getAll = function() {
        return $localStorage.things;
    };
    var _addByKey = function(thing, value) {
        $localStorage.things[thing] = value;
    }

    return {
        getAll: _getAll,
        addByKey: _addByKey
    };
})

---

However, assuming that you want to keep a reference of all values on the main collection and access them through keys, you can consider using an object to store the things intead of an array. So that you can use a property to store all items (you can store in a different place as well) and use this object to store your keys by referencing the to a desired value on your collection.

You may need to implement the deletion logic to maintain the consistence between the collection and the dictionary.

Your factory would look like this:

.factory('StorageService', function($localStorage) {
    $localStorage = $localStorage.$default({
        things: {
            items: []
        }
    });

    var _getAll = function() {
        return $localStorage.things.items;
    };

    var _add = function(thing) {
        $localStorage.things.items.push(thing);
    }
    var _addByKey = function(thing, value) {

        var i = $localStorage.things.items.push(value) - 1;
        $localStorage.things[thing] = $localStorage.things.items[i];
    }

    return {
        getAll: _getAll,
        add: _add,
        addByKey: _addByKey
    };
})