# Remember the state of a checkbox in a popup

**URL:** <https://discourse.mozilla.org/t/remember-the-state-of-a-checkbox-in-a-popup/31088>\
**Category:** Development\
**Created:** [August 20, 2018, 6:40pm UTC](https://discourse.mozilla.org/t/remember-the-state-of-a-checkbox-in-a-popup/31088 "2018-08-20T18:40:35Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Timeo](https://avatars.discourse-cdn.com/v4/letter/t/958977/32.png) [@Timeo](https://discourse.mozilla.org/u/Timeo)\
**Post date:** [August 20, 2018, 6:40pm UTC](https://discourse.mozilla.org/t/remember-the-state-of-a-checkbox-in-a-popup/31088/1 "2018-08-20T18:40:35Z")

</div>

Hello,

I have got a quite simple addons published on AMO which essentially consists of a popup (.html, .js) containing a form with, among other things, a checkbox.

This checkbox is an option that the user can tick before submitting the form in order to change how the form is processed.

I would like to remember the state of that checkbox so that the user only has to click it once until s/he wants to change the option again.

Looking for a solution, I only stumbled upon docs about to achieve this with (dedicated) options page, which is not what I am looking for.

Would you have any pointer about how to store/get/set the state of a checkbox within the popup (without option page)?

Thank you in advance for your help.

Tim

---

<div class="post-metadata">

**Author:** ![NilkasG](https://avatars.discourse-cdn.com/v4/letter/n/0ea827/32.png) [@NilkasG](https://discourse.mozilla.org/u/NilkasG)\
**Post date:** [August 20, 2018, 6:53pm UTC](https://discourse.mozilla.org/t/remember-the-state-of-a-checkbox-in-a-popup/31088/2 "2018-08-20T18:53:09Z")

</div>

You could either set the attributes for default form autocompletion (but I am not sure if Firefox does that on extension pages) or (with JavaScript) detect changes to the checkboxes state, save it to `browser.storage.local` (or `.sync`) and restore it on page load.

---

<div class="post-metadata">

**Author:** ![Timeo](https://avatars.discourse-cdn.com/v4/letter/t/958977/32.png) [@Timeo](https://discourse.mozilla.org/u/Timeo)\
**Post date:** [August 20, 2018, 9:15pm UTC](https://discourse.mozilla.org/t/remember-the-state-of-a-checkbox-in-a-popup/31088/3 "2018-08-20T21:15:09Z")

</div>

Thank you for your answer.

Could you please point me to some resources/examples about it please ?

---

<div class="post-metadata">

**Author:** ![NilkasG](https://avatars.discourse-cdn.com/v4/letter/n/0ea827/32.png) [@NilkasG](https://discourse.mozilla.org/u/NilkasG)\
**Post date:** [August 20, 2018, 9:43pm UTC](https://discourse.mozilla.org/t/remember-the-state-of-a-checkbox-in-a-popup/31088/4 "2018-08-20T21:43:08Z")

</div>

[`<input autocomplete>` on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-autocomplete), e.g. try `<input type=checkbox autocomplete=on>`. Maybe that works and you are done.

Otherwise:  
[https://www.google.com/search?q=browser.storage.local](https://www.google.com/search?q=browser.storage.local)

---

<div class="post-metadata">

**Author:** ![jscher2000](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/jscher2000/32/28202_2.png) [@jscher2000](https://discourse.mozilla.org/u/jscher2000)\
**Post date:** [August 21, 2018, 3:14pm UTC](https://discourse.mozilla.org/t/remember-the-state-of-a-checkbox-in-a-popup/31088/5 "2018-08-21T15:14:21Z")

</div>

The following example probably is more complicated than needed, because it’s my first extension that needs to do any storage or messaging.

I have some storage code in my background.js for user preferences (oPrefs object). popup.js sends a message requesting the user’s preferences (getSettings() function) and uses that data to set the state of controls on the popup’s Options tab (radio buttons, checkboxes, and a number input).

> **[GitHub - jscher2000/switch-to-previous-active-tab: Firefox toolbar button to switch to the last...](https://github.com/jscher2000/switch-to-previous-active-tab)**
>
> Firefox toolbar button to switch to the last accessed tab (and MRU popup)

---

<div class="post-metadata">

**Author:** ![Timeo](https://avatars.discourse-cdn.com/v4/letter/t/958977/32.png) [@Timeo](https://discourse.mozilla.org/u/Timeo)\
**Post date:** [August 30, 2018, 10:51am UTC](https://discourse.mozilla.org/t/remember-the-state-of-a-checkbox-in-a-popup/31088/6 "2018-08-30T10:51:41Z")

</div>

Hello,

Thank you for you kind answers 🙂

After looking at several examples and trying to dig into the doc, I gota say that I feel completely lost 🙁

What is the difference between _storage.local_ and _storage.managed_ for instance ? Which one is better fitted for storing options across browser restart and why ?

---

<div class="post-metadata">

**Author:** ![NilkasG](https://avatars.discourse-cdn.com/v4/letter/n/0ea827/32.png) [@NilkasG](https://discourse.mozilla.org/u/NilkasG)\
**Post date:** [August 30, 2018, 12:44pm UTC](https://discourse.mozilla.org/t/remember-the-state-of-a-checkbox-in-a-popup/31088/7 "2018-08-30T12:44:54Z")

</div>

`storage.managed` is only relevant in e.g. enterprise settings, where the organization manages that storage (and the extension can set preferences based on that).

What you usually want to work with is either `storage.local` or `storage.sync`.  
Both work basically the same, only that `sync` will be synced across all browsers signed in to the same account.  
So `sync` is usually suited best for extension settings and `local` for cached stuff.