Store objects in local storage

Question

Hello in some function I've got code which save object {} to localForage which is nothing but asynchronous localStorage

if(vm.convertedColors[vm.convertedColors.length - 1].colorInRGB &&
   vm.convertedColors[vm.convertedColors.length - 1].colorInHSL &&
   vm.convertedColors[vm.convertedColors.length - 1].colorInHEX) {
        $localForage.setItem('colors', {
            inHSL: vm.convertedColors[vm.convertedColors.length - 1].colorInHSL,
            inHEX: vm.convertedColors[vm.convertedColors.length - 1].colorInHEX,
            inRGB: vm.convertedColors[vm.convertedColors.length - 1].colorInRGB
        }).then(function() {
            $rootScope.$emit('localForageUpdated');
        });
}

This run ones after button click and store object colors. It is working good but when I change color and click button again I want it to save new colorsobject instead of replacing it how it's working now.

So I would like to save colors1 colors2 colors3 and so on. It can be array of objects. s.o.s

Barmar · Accepted Answer · 2017-09-28 18:17:43Z

2

Save it as an array. Then before saving the next one, get the old value, push the new object onto it, and save that.

$localForage.getItem('colors').then(function(colors) {
    colors = colors || []; // initialize as empty array on the first run
    colors.push({
        inHSL: vm.convertedColors[vm.convertedColors.length - 1].colorInHSL,
        inHEX: vm.convertedColors[vm.convertedColors.length - 1].colorInHEX,
        inRGB: vm.convertedColors[vm.convertedColors.length - 1].colorInRGB
    });
    $localForage.setItem('colors', colors).then(function() {
        $rootScope.$emit('localForageUpdated');
    });
});

edited Sep 28, 2017 at 18:17

answered Sep 28, 2017 at 18:05

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2652134 Over a year ago

You'd want to have $localForage.getItem('colors') somewhere.

Barmar Over a year ago

@BrahmaDev The first line.

BT101 Over a year ago

Why do I need getItem at the first line? On first function run I will not have any data in cache, will this run then?

Barmar Over a year ago

You need to get the item so you can append the new object to the array. The first time it will return null, and the line colors = colors || [] will substitute an empty array for that.

zero298 · Accepted Answer · 2017-09-28 18:07:59Z

2

Just store colors as an array and push to that array whenever you want to push a new color. Then push the array back to local storage.

if (vm.convertedColors[vm.convertedColors.length - 1].colorInRGB &&
    vm.convertedColors[vm.convertedColors.length - 1].colorInHSL &&
    vm.convertedColors[vm.convertedColors.length - 1].colorInHEX) {

    $localForage
        .getItem("colors")
        .then((colors) => {
            colors = colors || [];
            colors.push({
                inHSL: vm.convertedColors[vm.convertedColors.length - 1].colorInHSL,
                inHEX: vm.convertedColors[vm.convertedColors.length - 1].colorInHEX,
                inRGB: vm.convertedColors[vm.convertedColors.length - 1].colorInRGB
            });
            return $localForage.setItem("colors", colors);
        })
        .then((err) => {
            if (err) {
                console.error(err);
            }
            return $localForage.getItem("colors")
        })
        .then((colors) => {
            console.log(colors);
        });
}

answered Sep 28, 2017 at 18:07

zero298

27.1k10 gold badges80 silver badges109 bronze badges

2 Comments

zero298 Over a year ago

@Andreas I'm sorry, I was probably working on my answer at the same time. Do you want me to delete my answer?

Barmar Over a year ago

There are enough differences, like returning the promise instead of calling it directly, you wrapped it in the if.

Collectives™ on Stack Overflow

Store objects in local storage

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related