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

Question

因此，我的js文件中包含以下代码：

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

该函数本身并不重要（它等于在localstorage中设置的checkboxvalues），但是我执行了2次。 第一次将var a ＆ b设置为'b1'和'box1' 。 然后，我再次运行脚本（相同的脚本），但是将var a ＆ b设置为'b2'和'box2' 。 现在，这段代码可以用了，但是我的问题是，是否有较短的编写方式？ 我可以想象带有循环的某种数组，但是由于某种原因我无法使其工作。 这两个变量是成对的，我知道这可能是一个愚蠢的问题，但我在任何地方都找不到答案。

Answer 1

您可以使用第二个函数，该函数将接受本地存储​​密钥和复选框ID，例如

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

您可以将通用逻辑分为另一个功能

 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

这就是我要做的。

您的代码有几个问题。

• 您不会检查要为其添加属性的元素是否存在。 您无需检查是否定义了您获得的localStorage项。
• 您使用函数名称Equal污染了全局名称空间。
• 该函数不应使用大写字母命名，因为它不是对象生成器。
• 无需使用setAttribute和removeAttribute ，实际上，在这种情况下removeAttribute没有意义，因为您无法从元素中删除选中的属性。 顺便说一句，为什么在这里使用setAttribute而不对window.onload ？
• checked属性为true或false，它不使用字符串“ checked”
• 通过onload属性绑定load事件并不安全，因为您可能会阻止第三方代码，或者更糟糕的是第三方代码可能会阻止您。
• 没有错误检查。 DOM页面是动态环境，页面上的广告和来自许多地方的内容可能会干扰您的代码。 始终牢记这一点。 检查可能的错误，并以友好的方式对最终用户进行处理。 在这种情况下，我使用了一个警报，该警报对普通用户不友好，但对您来说对编码员而言却不友好。

我的解决方案。

// 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?");
        }
    }
);