Martijn Martijn - 23 days ago 8
Javascript Question

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
};
})

Answer

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
    };
})