3

trying to implement options page for a firefox addon/extension version 64.0. I am using browser.storage.local.set to store data. but when I use browser.storage.local.get to pull the data, the result is <unavailable> on the console log.

the following is the function i run in my options.js file (i entered njnj on the form field gateway and hit the submit button)

function saveOptions(e) {
  e.preventDefault();
  console.log("you are here")
  console.log(document.querySelector("#gateway").value)
  browser.storage.local.set({
  "gateway": document.querySelector("#gateway").value  });
  console.log(browser.storage.local.get("gateway"))
}

document.querySelector("form").addEventListener("submit", saveOptions);

my actual output in the console log is as follows : 

you are here                                         options.js:4:3
njnj                                                options.js:5:3
<unavailable>                                       options.js:8:3
Hpatel
  • 31
  • 4
  • my expected output should be to get 'njnj' back as the value for "gateway", since that is what I just set it to. – Hpatel Apr 05 '19 at 19:25

3 Answers3

0

ok so I did figure out partly why the above code is not working. the problem is that browser.storage.local.get() returns a 'promise' in javascript (I dont actually know what it means yet). So you have to have a code that will actually retrieve the answer/saved value from this 'promise'. I will give you an example on how to retrieve the value:

// first save a key value pair into storage
browser.storage.local.set({"key": 'value'})

// to retrieve this value, first declare a new variable
var savedvalue = "zero"

// retrieve the 'promise' of key value pair, then run the associated function to get
//the savedvalue and set it equal to previously declared variable. 
browser.storage.local.get(['key'], function(result) {savedvalue = result.key});

// now, when you call savedvalue (even outside the function above), it will return 'value'
console.log(savedvalue)

output>> value
Hpatel
  • 31
  • 4
  • Edit by an anonymous user: *`function(result) {savedvalue = result.key});` <== Dik: Should probably be: `result.value` or something*. – greybeard Dec 04 '20 at 04:14
  • This construct isn't quite correct: the code should be `browser.storage.local.get('key').then( function (result) { console.log(result.key); }).catch(function (error) { // error code });` see https://stackoverflow.com/questions/29516390/how-can-i-access-the-value-of-a-promise – wesinat0r Feb 09 '23 at 04:57
0

You could use async function and await, like this

async function saveOptions(e) {

  e.preventDefault();      
  await browser.storage.local.set(
    { "gateway": document.querySelector("#gateway").value }
  );
}

document.querySelector("form").addEventListener("submit", async saveOptions);

You don't need to pass the 'e' to the function, you're not doing anything with it. You could also refactor it this way, if the mood took you

document.querySelector("form").addEventListener( "submit", async ()=> {
    e.preventDefault();      
    await browser.storage.local.set(
      { "gateway": document.querySelector("#gateway").value }
    );
});
russell newton
  • 99
  • 7
0

The question is really about how to get/handle the value of a Promise in async Javascript (which the browser.storage.local.get() method is).

browser.storage.local.get('gateway').then(
        function (result) {
            // code goes here
            console.log(result.gateway);
        }).catch(function (error) {
            // error code
        });

see How can I access the value of a promise?

wesinat0r
  • 121
  • 8