Firefox extensions: How to save the value of a javascript variable to local storage?

Question

The popup of my extension has a checkbox:

<div id="popup-content">
  <input id="checkBox" type="checkbox">
</div>

The way it's set up now, if I click on the extension icon on the toolbar and check the checkbox in the popup, the value of the checkbox isn't saved when the popup disappears i.e. if I open the popup again it shows that the checkbox is unchecked. I did some searching around and found out that I needed to use the storage api and store the variable in the storage, but I'm not sure how to proceed. I saw the examples in the storage api documentation, but all of them use keys and values instead of simple variables. This is what my js file looks right now:

document.getElementById('checkBox').addEventListener('change', function() {
  var m = document.getElementById("checkBox").checked;
  browser.storage.local.set(m);
  alert(browser.storage.local.get("m"));
});

I'm obviously doing something wrong here because I'm not getting any alert message stating the value of the checkbox. What am I doing wrong? Also, this is only half of the problem. How do I set it up such that if I reopen the popup, the checkbox will show checked if it was checked before?

yes, to store in local storage you need a key and a value - otherwise you could only store a single value, which would be pointless - read the documentation carefully ... then try again — Jaromanda X, Dec 04 '17 at 09:09
@JaromandaX Is a key and a value necessary in this case since I'm only trying to store the value of the variable m? — Arif, Dec 04 '17 at 09:10
And how do you propose to retrieve the value of variable m that way? — blueren, Dec 04 '17 at 09:10
@blueren I have no idea... is it not possible to retrieve a single value from local storage? I'm new to this so I'm really confused how it all works — Arif, Dec 04 '17 at 09:12
`browser.storage.local.set({m:m});` or `browser.storage.local.set({m});` ... note, browser.storage is ASYNCHRONOUS, so you won't be able to read the value directly like that - something is pointed out in the doumentation you linked to — Jaromanda X, Dec 04 '17 at 09:12
I believe OP is using [WebExtensions/API/storage](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/storage/local) and not the usual [window.localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) — mplungjan, Dec 04 '17 at 09:12
get would be done like `browser.storage.local.get({m:'default value for m'}).then(({m}) => console.log(m))` — Jaromanda X, Dec 04 '17 at 09:15

Jaromanda X · Accepted Answer · 2017-12-04T20:19:40.493

1

Firstly, browser.storage.local.set is asynchronous, so your alert is doomed to failure

secondly, according to the documentation you actually linked to, the usage is as follows

document.getElementById('checkBox').addEventListener('change', function() {
  var m = document.getElementById("checkBox").checked;
  browser.storage.local.set({m})
  .then(() => browser.storage.local.get({m:''}))
  .then(({m}) => alert(m));
});

when the popup opens, you would do something like the following

browser.storage.local.get({m:''}).then(value => document.getElementById("checkBox").checked = !!value);

Though I'm a bit vague as to where in your code you do that

edited Dec 04 '17 at 20:19

answered Dec 04 '17 at 09:16

Jaromanda X

53,868
5
73
87

Excellent! That worked perfectly. Now how do I make the checkbox remember the value even when the popup is closed? Is there a event that is fired when a user opens the popup so I can fetch the value from local storage using JS and apply it to the checkbox? – Arif Dec 04 '17 at 17:29

score 0 · Answer 2 · answered May 14 '18 at 23:16

A complete solution to your problem might be as follows:

myObject = {};

function writeParameter(a) {document.getElementById("checkBox").checked = !!a.myObject.myKey;}

function saveOptions(e) {
  t = document.getElementById("checkBox").checked;
  myObject.myKey = t;
  browser.storage.local.set({myObject}).this();
  e.preventDefault();
}

function restoreOptions() {
  browser.storage.local.get('myObject').then(writeParameter);
}

document.addEventListener('DOMContentLoaded', restoreOptions); //Restore defaults on DOM load...
document.getElementById('checkBox').addEventListener("change", saveOptions);

Note the use of `this()' within the browser.storage object. It's use might not be necessary in this case but it is with other forms of record. Also make sure that your manifest file has all the correct entries.

Firefox extensions: How to save the value of a javascript variable to local storage?

2 Answers2