有没有更好、更干净的方法来编写这个本地存储数据

Posted 2023-05-09

【中文标题】有没有更好、更干净的方法来编写这个本地存储数据

【英文标题】：Is there a better, cleaner way to write this localstorage data

【发布时间】：2021-08-22 22:15:01

【问题描述】：

我的输入表单中有一些验证，我通过本地存储保留了这些值。如果有任何验证错误并且页面重新加载，我会从本地存储中获取值并将它们设置为相应的输入字段。我写的代码很长而且重复，我只是想知道是否有一种不太健壮的方法来编写这段代码。

const dataArray = []

    $("#formData").on('submit', () => 
        dataArray.push($("#building").val());
        dataArray.push($("#measure_type").val());
        dataArray.push($("#status").val());
        dataArray.push($("#staff_lead").val());
        dataArray.push($("#staff_colead").val());
        dataArray.push($("#analyst").val());
        dataArray.push($("#addImpAnn").val());
        dataArray.push($("#addCategory").val());
        dataArray.push($("#addBaseCommodity").val());
        dataArray.push($("#addSource").val());
        dataArray.push($("#addPhase").val());
        dataArray.push($("#addSavingsCommodity").val());
        localStorage.setItem('values', JSON.stringify(dataArray))
    );


    window.onload = () => 
        const getVal = JSON.parse(localStorage.getItem('values'));
        $('#building').val(getVal[0]);
        $('#measure_type').val(getVal[1]);
        $('#status').val(getVal[2]);
        $('#staff_lead').val(getVal[3]);
        $('#staff_colead').val(getVal[4]);
        $('#analyst').val(getVal[5]);
        $('#addImpAnn').val(getVal[6]);
        $('#addCategory').val(getVal[7]);
        $('#addBaseCommodity').val(getVal[8]);
        $('#addSource').val(getVal[9]);
        $('#addPhase').val(getVal[10]);
        $('#addSavingsCommodity').val(getVal[11]);

        if(getVal[0] === null)
            $("#building").val("Choose...")
        
        if(getVal[1] === null)
            $("#measure_type").val("Choose...")
        
        if(getVal[2] === null)
            $("#status").val("Choose...")
        
        if(getVal[3] === null)
            $("#staff_lead").val("Choose...")
        
        if(getVal[4] === null)
            $("#staff_colead").val("Choose...")
        
        if(getVal[5] === null)
            $("#analyst").val("Choose...")
        
        if(getVal[6] === null)
            $("#addImpAnn").val("Choose...")
        
        if(getVal[7] === null)
            $("#addCategory").val("Choose...")
        
        if(getVal[8] === null)
            $("#addBaseCommodity").val("Choose...")
        
        if(getVal[9] === null)
            $("#addSource").val("Choose...")
        
        if(getVal[10] === null)
            $("#addPhase").val("Choose...")
        
        if(getVal[11] === null)
            $("#addSavingsCommodity").val("Choose...")
        
    ;

【参考方案1】：

我会使用一个对象和一个元素 ID 数组来执行此操作，这些元素 ID 可以循环到对象中的设置值和 DOM 中的设置值

类似：

const ids = ['building', 'measure_type', 'status'...];

let dataObj = ;

$("#formData").on('submit', () => 
  ids.forEach(id => obj[id] = $('#' + id).val());
  localStorage.setItem('values', JSON.stringify(dataObj))
);


window.onload = () => 
   const storedVals = localStorage.getItem('values');
   if(storedVals)
      dataObj = JSON.parse(storedVals)
      ids.forEach(id => $('#' + id).val(dataObj[id] || 'Default value'));          
   

【参考方案2】：

您可以将值作为记录保存到 localStorage ( "#building": "x", "#measure_type": "y" )

然后检索如下：

Object.entries(localStorage.getItem('values')).forEach(([key, value]) =>  
    $(key).val(value ?? "Choose...") 
)

【讨论】：

也许编辑和更新答案以改进它而不是评论