Store text input under text inputs name?

Add-ons Development
#1

I’ve been having trouble the last few days with an issue. I’m trying to create a function that will store each text input’s name and value with browser.storage.sync() so that way I can just call it like: “Textbox.Color” or “Textbox.PhoneNumber”. Where “Color” or “PhoneNumber” is the matching name in storage as well as the Text input that was provided.

I’m essentially trying to save myself some copy-and-paste coding.

#2

And what exactly is the trouble you’re having?

#3

Here’s the code I’ve got:

function getTextboxes(){

  const TextName = document.querySelectorAll(".data-types [type=text]");

  for(let item of TextName){

    if(item.value !== ""){

      let Name = item.getAttribute("name");

      let Value = item.getAttribute("value");

      browser.storage.sync.set({

        Name: Value

      });

    }

  }

}

getTextboxes()

That’s in it’s simplest form. I’m trying to make it so that whatever the name of the input tag is, will be saved as the name for storage, and then the value will be saved as the value in storage. So when I just call the name, it will return the value, whether it is a number or name of an animal.

#4 
          let Name = item.getAttribute("name");
          let Value = item.getAttribute("value");
          browser.storage.sync.set({
            Name: Value
          });

will always set the same key, the key named “Name”. If you want to set the key with the name that is stored in the Name variable, you need to use the dynamic key name syntax for object literals:

browser.storage.sync.set({
  [Name]: Value
});
#5

Obviously the “Name: Value” part will not work because it doesn’t recognize the variables as such.