如何在此重复函数中使用数组而不是变量？

Question

So, I have this little code in my js file:

window.onload = function Equal() {
  var a = 'b1'
  var b = 'box1'
  var bookstorname = localStorage.getItem(a)
  if (bookstorname == 1) {
    document.getElementById(b).setAttribute('checked','checked');
  }
  if (bookstorname == 0) {
    document.getElementById(b).removeAttribute('checked','checked');
  }
  var a = 'b2'
  var b = 'box2'
  var bookstorname = localStorage.getItem(a)
  if (bookstorname == 1) {
    document.getElementById(b).setAttribute('checked','checked');
  }
  if (bookstorname == 0) {
    document.getElementById(b).removeAttribute('checked','checked');
  }
}

The function itself is not important (it equals checkboxvalues set in the localstorage), but I execute it 2 times. First time with var a & b set to 'b1' & 'box1' . Then I run the script again (same script), but with var a & b set to 'b2' & 'box2' . Now, this code works, but my question is if there is a shorter way to write this? I can imagine some sort of array with a loop, but I could not get it to work for some reason. The 2 variables are pairs, and I know this might be a dumb question, but I can't find the answer anywhere.

Answer 1

You can use a second function which will accept the local storage key and the checkbox id like

window.onload = function Equal() {
    setCheckboxState('box1', 'b1');
    setCheckboxState('box2', 'b2');
}

function setCheckboxState(id, key) {
    document.getElementById(id).checked = 1 == localStorage.getItem(key);
}

Answer 2

function doTheStuff(a, b) {

  var bookstorname = localStorage.getItem(a)

  if (bookstorname == 1) {

    document.getElementById(b).setAttribute('checked','checked');

  }

  if (bookstorname == 0) {

    document.getElementById(b).removeAttribute('checked','checked');

  }  

}



window.onload = function Equal() {

  doTheStuff('b1', 'box1');

  doTheStuff('b2', 'box2');

}

?

Answer 3

You might separate common logic into another function

 window.onload = function Equal() { function extractFromStorage(a, b) { var bookstorname = localStorage.getItem(a) if (bookstorname == 1) { document.getElementById(b).setAttribute('checked','checked'); } if (bookstorname == 0) { document.getElementById(b).removeAttribute('checked','checked'); } } extractFromStorage('b1', 'box1'); extractFromStorage('b2', 'box2'); } 

Answer 4

This is how I would do it.

There are several problems with your code.

• You do not check that the element you are stetting an attribute to exists. You do not check if the localStorage item you get is defined.
• You pollute the global name space with the function name Equal.
• That function should not be named with a capital as it is not a Object generator.
• There is no need to use setAttribute and removeAttribute , in fact removeAttribute makes no sense in this case as you can not remove the checked attribute from the element. BTW why use setAttribute here and not for window.onload ?
• The checked attribute is either true or false, it does not use the string "checked"
• Binding the load event via the onload attribute is not safe as you may block 3rd party code, or worse 3rd party code may block you.
• There is no error checking. DOM pages are dynamic environments, pages have adverts and content from many places that can interfer with your code. Always code with this in mind. Check for possible errors and deal with them in a friendly way for the end user. In this case I used an alert, not friendly for a normal user but for you the coder.

My solution.

// add an event listener rather than replace the event listener
window.addEventListener(
    "load",  // for the load event
    function(){

        // the update function that is called for each item;
        var update = function(item){
            // the right hand side equates to true if the localstorage
            // is equal to "1". LocalStorage allways returns a string or
            // undefined if the key is not defined.
            item.element.checked = localStorage[item.storageName] === "1";
        }   

        // safe element getter     
        var getElement = function(eId){
            var e = document.getElementById(eId); // try and get the element
            if(e === null){  // does it exist?
                throw "Missing element:"+eId;  // no then we can not continue
                                               // the program stops here unless
                                               // you catch the error and deal with 
                                               // it gracefully.
            }
            return e; //ok return the element.
        }

        // Item creator. This creates a new item.
        // sName is the local storage name
        // eId id the element ID
        var item = function(sName, eId){
            return {
                storageName: sName,  // set the loaclStorage name
                element:getElement(eId); // get the element and check its safe
            };
        }

        // make it all safe
        try{
            // create an array of items.
            var items = [
                item("b1","box1"),
                item("b2","box2")
            ];
            // for each item update the element status
            items.forEach(update);
        }catch(e){
            alert("Could not update page?");
        }
    }
);