Save key=>value style with ngStorage/localstorage

Question

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

score 1 · Accepted Answer · edited Nov 14 '16 at 13:33

1

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

edited Nov 14 '16 at 13:33

Martijn

15,791
4
36
68

answered Nov 14 '16 at 11:58

lenilsondc

9,590
2
25
40

The `things` part is only there as example. Where you use 'items' they use 'things'. I'm going to reread your answer to see he difference – Martijn Nov 14 '16 at 12:11
@Martijn You must change things to work like a particular collection, you don't want it to be on the root of `$localStorage` you may need to use it to store other things rather than this actual collection. But if it's not a problem, you can move it to the root as well :{D – lenilsondc Nov 14 '16 at 12:13
Am I correct when I think your answer provides a array solution? If so, an object solution would be fine too if that makes the key-problem go away. – Martijn Nov 14 '16 at 12:16
The solution is to provide a shortcut as a dictionary to access particular values on an array, but it keeps all values in an array. But you can change that to an isolated scope if you like. – lenilsondc Nov 14 '16 at 12:19
@Martijn Basically in raw localStorage system you can store a key value collection of strings, what ngStorage does is to use localStorage as a storage mechanism to allow you storing complex objects and arrays, to improve the usage and performance of localStorage It uses javascript Object's behaviours to give you an impression that you are using an object, but internally it serializes and unserialize a json storing and retriving it from localStorage. It's basically more practical than using localStorage directly. – lenilsondc Nov 14 '16 at 12:46
Ok, after some reverse enginering, the difference is that this answer uses an object for `things`, I had an array. I've changed it to an object and my whole code works exactly as I want. Litterly had to change `[]` to `{}` – Martijn Nov 14 '16 at 13:06
Ok, but how are you adding non key-value items? – lenilsondc Nov 14 '16 at 13:07
I don't. Everything has an key and value. My apologies if that seemed to be my question. The povided snippet comes with a non-key value, I just expanded on it. – Martijn Nov 14 '16 at 13:10
If you update your answer to a two part answer, one simply suggesting object instead of array, and the 2nd part as you have it now, I'll mark it as answer because it that provides two solutions – Martijn Nov 14 '16 at 13:12
Ok, I understand now. I'll elaborate. – lenilsondc Nov 14 '16 at 13:13

Save key=>value style with ngStorage/localstorage

1 Answers1