如何将动态字段保存到localStorage

Question

我正在寻找一种解决方案来保存动态创建的输入到localStorage，这样当我单击添加时，新字段将在打开和关闭HTML文档时重新加载。

[FIDDLE][1]


    HTML
    <div class="container">
        <div id="allCRs">
            <table class="form-table" id="customFields">
                <tr id="trTags" valign="top">
                    <th id="rows" scope="row"><label for="customFieldName">CR</label></th>
                    <td id="allRows">
                        <input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="CR #" /> &nbsp;
                        <input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Description" /> &nbsp;
                        <input type="text" class="code" id="customFieldValue1" name="customFieldValue1[]" value="" placeholder="Submitted By" /> &nbsp;
                        <input type="text" class="code" id="customFieldValue2" name="customFieldValue2[]" value="" placeholder="Assigned To" /> &nbsp;
                        <input type="text" class="code" id="customFieldValue3" name="customFieldValue3[]" value="" placeholder="QA Contact" /> &nbsp;
                        <input type="text" class="code" id="customFieldValue4" name="customFieldValue4[]" value="" placeholder="Risk Assessement" /> &nbsp;
                        <a href="javascript:void(0);" class="addCF" id="addNew">Add</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
  <script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>

Javascript - 添加/删除字段。

$(document).ready(function () {
    $(".addCF").click(function () {
        $("#customFields").append('<tr valign="top"><th id="rows" scope="row"><label for="customFieldName">CR</label></th><td id="allRows"><input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="CR #" /> &nbsp; <input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Description" /> &nbsp; <input type="text" class="code" id="customFieldValue1" name="customFieldValue1[]" value="" placeholder="Submitted By" /> &nbsp;  <input type="text" class="code" id="customFieldValue2" name="customFieldValue2[]" value="" placeholder="Assigned To" />    &nbsp;<input type="text" class="code" id="customFieldValue3" name="customFieldValue3[]" value="" placeholder="QA Contact" />&nbsp;<input type="text" class="code" id="customFieldValue4" name="customFieldValue4[]" value="" placeholder="Risk Assessement" />                      &nbsp;<a href="javascript:void(0);" class="remCF">Remove</a></td></tr>');
    });
    $("#customFields").on('click', '.remCF', function () {
        $(this).parent().parent().remove();
    });
});

  [1]: https://jsfiddle.net/dahonen/z3prg1su/#