How to use localForage synchronously

Question

I have a Cordova mobile app that stores offline data in localStorage. Recently users started getting QUOTA_EXCEEDED_ERR error because localStorage has 5MB limit. I decided to use "localForage" framework, but I noticed that it works asynchronously. Since I don't want to rewrite all my complex app wrapping into callback functions I wanted to know if there is some way to use "localForage" synchronously (wait till getItem function returns value).

Here is a code example what I am trying to do:

localforage.setItem('testKey', 'testValue', function() {
  var value = getValue('testKey');

  console.log(value); // here I get undefined, but I want to get a value
});

function getValue(key) { // I want this function to return value
  var result;
    localforage.getItem(key, function(value) {
    result = value;
  });

  return result;
}

I want getValue() to return a value without changing any other code

Hamza Ahmed · Answer 1 · 2019-02-07T12:22:12.443

1

According to this link

localForage has a dual API that allows you to either use Node-style callbacks or Promises. If you are unsure which one is right for you, it's recommended to use Promises.

So you can use any of them if you like. if using promises you can use async/await to wait for the result

localforage.setItem('testKey', 'testValue', async function() {
  var value = await getValue('testKey')

  console.log(value); // here I get undefined, but I want to get a value
});

 async function getValue(key) { 
  var result = await localforage.getItem(key);
  return result;
}

jsfiddle

edited Feb 07 '19 at 12:22

answered Feb 07 '19 at 09:02

Hamza Ahmed

521
5
12

I tried this way but it doesn't work either :/ . See: https://jsfiddle.net/kqf5xvz7/ – user2412672 Feb 07 '19 at 10:40
1

Yeah, but now I need to change all functions which calls getValue to async. I want to change one place and don't break this old fragile application :) – user2412672 Feb 07 '19 at 13:37
I dont think there is another way. Because of the `async` nature you have to stop the code from moving forward unless you have the data and for that you have to use either `callbacks` or `async/await` – Hamza Ahmed Feb 08 '19 at 11:54

score 1 · Answer 2 · answered Aug 29 '20 at 12:13

1

https://localforage.github.io/localForage/#data-api-getitem, use async/await:

try {
    const value = await localforage.getItem('somekey');
    // This code runs once the value has been loaded
    // from the offline store.
    console.log(value);
} catch (err) {
    // This code runs if there were any errors.
    console.log(err);
}

answered Aug 29 '20 at 12:13

mesutpiskin

1,771
2
26
30

The answer works. In my case, I have to write "await localforage.getItem" inside vuex actions other than mutations to make it synchronously，since vuex mutaitions will ignore "await". – dogdog Jul 10 '23 at 08:49

score -1 · Answer 3 · answered Apr 13 '20 at 07:36

localforage.setItem('testKey', 'testValue', async function() {//declare function as async
  var value = await getValue('testKey'); //wait for the value

  console.log(value); // "testValue" value should show in console
});

//declare function as async
async function getValue(key) {
  var result = await localforage.getItem(key); //wait for the localforage item

  return result;
}

JSFiddle here: https://jsfiddle.net/mvdgxorL/

How to use localForage synchronously

3 Answers3