Question

我有以下javascript用于存储许多div

function savecells() {
    for (var tt = 0; tt < 12; tt++)
        localStorage.setItem(
            'savecellnoinsulation' + (tt + 1), 
            document.getElementById('noinsulation' + (tt + 1)).value
        );
}

如何为以下负载存储执行此操作？

function loadcells() {

    if (localStorage.getItem('savecellnoinsulation1')) {
        var answer = localStorage.getItem('savecellnoinsulation1');
    } else {
        var answer = ' ';
    }
    document.getElementById('noinsulation1').value = answer;

    if (localStorage.getItem('savecellnoinsulation2')) {
        var answer = localStorage.getItem('savecellnoinsulation2');
    } else {
        var answer = ' ';
    }
    document.getElementById('noinsulation2').value = answer;

    if (localStorage.getItem('savecellnoinsulation3')) {
        var answer = localStorage.getItem('savecellnoinsulation3');
    } else {
        var answer = ' ';
    }
    document.getElementById('noinsulation3').value = answer;

    if (localStorage.getItem('savecellnoinsulation4')) {
        var answer = localStorage.getItem('savecellnoinsulation4');
    } else {
        var answer = ' ';
    }
    document.getElementById('noinsulation4').value = answer;

    if (localStorage.getItem('savecellnoinsulation5')) {
        var answer = localStorage.getItem('savecellnoinsulation5');
    } else {
        var answer = ' ';
    }
    document.getElementById('noinsulation5').value = answer;

    if (localStorage.getItem('savecellnoinsulation6')) {
        var answer = localStorage.getItem('savecellnoinsulation6');
    } else {
        var answer = ' ';
    }
    document.getElementById('noinsulation6').value = answer;

    if (localStorage.getItem('savecellnoinsulation7')) {
        var answer = localStorage.getItem('savecellnoinsulation7');
    } else {
        var answer = ' ';
    }
    document.getElementById('noinsulation7').value = answer;

    if (localStorage.getItem('savecellnoinsulation8')) {
        var answer = localStorage.getItem('savecellnoinsulation8');
    } else {
        var answer = ' ';
    }
    document.getElementById('noinsulation8').value = answer;

    if (localStorage.getItem('savecellnoinsulation9')) {
        var answer = localStorage.getItem('savecellnoinsulation9');
    } else {
        var answer = ' ';
    }
    document.getElementById('noinsulation9').value = answer;

    if (localStorage.getItem('savecellnoinsulation10')) {
        var answer = localStorage.getItem('savecellnoinsulation10');
    } else {
        var answer = ' ';
    }
    document.getElementById('noinsulation10').value = answer;

    if (localStorage.getItem('savecellnoinsulation11')) {
        var answer = localStorage.getItem('savecellnoinsulation11');
    } else {
        var answer = ' ';
    }
    document.getElementById('noinsulation11').value = answer;

    if (localStorage.getItem('savecellnoinsulation12')) {
        var answer = localStorage.getItem('savecellnoinsulation12');
    } else {
        var answer = ' ';
    }
    document.getElementById('noinsulation12').value = answer;
}

我确实尝试了类似的方法，但它无法正常工作。这甚至可能吗？不确定还有什么要尝试的！

由于

Answer 1

这是一个反转savecells()函数的函数。如果页面布局与您保存它们的页面相同，它将只取所有值并将它们放回原来的位置。

function retreiveCells() {
    for (var tt = 0; tt < 12; tt++){
        document.getElementById('noinsulation' + (tt + 1)).value = localStorage.getItem('savecellnoinsulation' + (tt + 1)) || '' ;
    }
}

Answer 2

我认为你可以简化：

if (localStorage.getItem('savecellnoinsulation4')) {
    var answer = localStorage.getItem('savecellnoinsulation4');
} 
else {
    var answer = ' ';
}

by：var answer = localStorage.getItem('savecellnoinsulationX') || '';

Ands使用一个包含所有主题名称的数组，或只是结尾的数组，你可以生成一个字符串来检查for loop

所以基本上以下应该有效：

for (var i=1; i<=12; i++) { 
    var itemStr = "noinsulation" + i;
    var saveItemStr = "savecell" + item;
    var answer = localStorage.getItem(saveItemStr) || '';
    document.getElementById(itemStr).value = answer;
}

减少我的代码

2 个答案: