How do I assign a variable from localForage as I do in localStorage?

Question

Please help me with the following.

I have been converting my AngularJS application from localStorage to localForage.

throughout my application I was assigning the localStorage value like this.

window.localStorage.setItem('localSavedValue','SavedValue');

and then I was retrieving the data like this,

var myValue = window.localStorage.getItem('localSavedValue');

So when I console.log(myValue); // it outputted 'SavedValue'

I cannot seem to do this with localForage when I try,

$localForage.setItem('localSavedValue','SavedValue');
var myValue = $localForage.getItem('localSavedValue');
console.log(myValue); // returns an object.

I don't get the value set to myValue.

I am sure this is something do do with promises as when I use the callback I can access the correct 'myValue' however I want to get it out of the call back to use in the rest of the service.

Also to note, I am in a service so can't assign to $scope (unless I don't know how).

Appreciate any help.

Thanks B

if you don't want to use callbacks, why not just use the sync localStorage? — dandavis, Feb 07 '15 at 23:44
I am worried about the size limitation of local storage. Do you know how I can use the callback to set a variable that I can use? — Brent R, Feb 07 '15 at 23:48
callbacks usually come with their own variables, passed as formal parameters. if you find yourself wanting to "move" data to an existing variable, you are likely not approaching the problem in an async manner. you need to bring verbs to nouns, not nouns to verbs. you won't find any other large storage provider that's not async, so it pays big to brush up on async and figure out how to make it work for you. might not be an easy fix, but it's the only way to do it right... — dandavis, Feb 07 '15 at 23:56
Thanks so much for your comments. I can see wrapping my service in the callback, but I immediately was worried about when I have more than one data value that I need to use. — Brent R, Feb 08 '15 at 00:13
you can put whole dispatch/callback routines inside of other callbacks. if you're doing a ton of them, it pays to convert to promises, but that requires even more to learn. in short, just nest callbacks as needed for now until it becomes messy, which very well might never happen. — dandavis, Feb 08 '15 at 00:49
Thanks @dandavid! I took your advise and spent a couple hours this morning on promises and getting it right. I was running a resolve in my state declaration so now I have a separate resolve function and use the call back as a parameter in the next resolve and all working perfectly. Final question, I know I can pass a resolve to another resolve as a parameter, do you know if a function requiring a resolved function as a parameter will cause that function to wait till it's parameter promise is resolved? Thanks again! — Brent R, Feb 08 '15 at 10:51
@dandavis thanks for everything. I have got is down. I am using promises now for all my async calls and they are working beautifully. Just needed your confirmation that is was me needing some extra knowledge rather than an implementation that I was attempting which didn't work. Thanks again!! — Brent R, Feb 08 '15 at 11:53
@dandavid, you're the first to point out the issue we're having, but it seems more to do with Scope than Async to my perception, as the method had already ran and afterword when trying to call the data, it wasn't available unless it was called for within the nested callback being used. So myself and others were certain it was a scope issue and that our data fetched was "trapped" within the callbacks with no way outside back to the main code. I suppose the "async" way is massive callback nesting with Promises. Wow. If it worked for BrentR it must be the answer I am looking for! ^5 THANK YOU. — TommyRay, Apr 15 '16 at 20:20

score 0 · Answer 1 · answered Jul 24 '15 at 11:43

$localForage.setItem('localSavedValue','SavedValue').then(function() {
        $localForage.getItem('localSavedValue').then(function(data) {
            console.log(data); 
        });
    });

https://github.com/ocombe/angular-localForage#configure-the-provider-

score 0 · Answer 2 · answered Oct 31 '17 at 12:00

LocalForage is async by design so I would suggest you to use Promises like @RouR suggested.

A minor improvement for code clarity would be to chain-return the promise results, but you still can't avoid the async code consequences.

$localForage.setItem('localSavedValue','SavedValue').then(function() {
    return $localForage.getItem('localSavedValue');
}).then(function(data) {
    console.log('I\'m printed second', data); 
});
console.log('I\'m printed first');

If you are using Babel, a more friendly approach for such migrations would be to configure it to use transform-async-to-generator or preset-es2017 and rewrite such code as

await $localForage.setItem('localSavedValue','SavedValue');
const data = await $localForage.getItem('localSavedValue');
console.log(data);

How do I assign a variable from localForage as I do in localStorage?

2 Answers2

Linked