Расширения Firefox: Как сохранить значение переменной javascript в локальном хранилище?

Всплывающее окно моего расширения имеет флажок:

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

Как это настроено сейчас, если я нажимаю на значок расширения на панели инструментов и отмечаю флажок во всплывающем окне, значение флажка не сохраняется, когда всплывающее окно исчезает, т.е. если я снова открываю всплывающее окно, это показывает, что флажок не проверяется. Я немного искал и обнаружил, что мне нужно использовать storage api и сохранить переменную в хранилище, но я не уверен, как поступить. Я видел примеры в документации API хранилища, но все они используют ключи и значения вместо простых переменных. Вот как выглядит мой js-файл прямо сейчас:

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

Я, очевидно, что-то делаю не так, потому что я не получаю никаких предупреждений с указанием значения флажка. Что я делаю неправильно? Кроме того, это только половина проблемы. Как настроить его так, чтобы при повторном открытии всплывающего окна флажок показывал флажок, проверенный ранее?

Источник

2 ответа

Решение

Во-первых, browser.storage.local.set является асинхронным, поэтому ваше оповещение обречено на провал

во-вторых, в соответствии с документацией, с которой вы на самом деле ссылались, использование выглядит следующим образом:

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));
});

когда откроется всплывающее окно, вы должны сделать что-то вроде следующего

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

Хотя я немного неопределен относительно того, где в вашем коде вы делаете это

Источник

Полное решение вашей проблемы может быть следующим:

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);

Обратите внимание на использование this() в объекте browser.storage. В этом случае его использование может быть необязательным, но это происходит с другими формами записи. Также убедитесь, что ваш файл манифеста содержит все правильные записи.

Источник
Другие вопросы по тегам