功能适用于Chrome / Safari，但不适用于Firefox

Question

所以我有一个表，您可以在其中检查表行，它将获取该行中每个单元格的值，并显示另一个名为Quantity #的列。 type="number"列包含Quantity #输入。输入数字后，用户将能够刷新页面和$(function($) { var RowData = (function(storage, storageKey) { var rowData = readFromSession(); var dataItems = ['loc', 'rp-code', 'sku', 'special-id', 'description', 'quantity', 'unit']; var emailDelimiters = { 'row': '%0D%0A', 'dataItem': '\xa0\xa0' }; function readFromSession() { return JSON.parse(storage.getItem(storageKey) || '{}'); } function writeToSession() { storage.setItem(storageKey, JSON.stringify(rowData)); } function writeRow(tr) { var $tr = $(tr), id = $tr.prop('id'); if($tr.find('.check').is(':checked')) { rowData[id] = {}; for(var i=0; i<dataItems.length; i++) { rowData[id][dataItems[i]] = $tr.find('.' + dataItems[i]).text(); } rowData[id].quantity_num = $tr.find('.spinner').val(); } else { delete rowData[id]; } writeToSession(); } function readRow(tr) { // restore tr's checkbox and spinner value from stored data var $tr = $(tr), id = $tr.prop('id'), row = rowData[id]; if(row) { $tr.find('.check').prop('checked', true).end() // .find('.spinner').spinner('value', row.quantity_num); // if using spinner widget .find('.spinner').val(row.quantity_num); // if using HTML5 <input type="number"> } } function toEmailString() { return $.map(rowData, function(row, id) { return $.map(row, window.encodeURIComponent).join(emailDelimiters.dataItem); }).join(emailDelimiters.row); } // selectively expose functions as methods of RowData return { 'writeRow': writeRow, 'readRow': readRow, 'toEmailString': toEmailString }; })(window.sessionStorage, 'checkedRowData'); $('#merchTable').on('change', '.check', function() { // on changing a table row ... RowData.writeRow($(this).closest('tr').get(0)); // ... set the corresponding row object in RowData and sessionStorage }).on('blur', '.spinner', function() { // on leaving a spinner widget RowData.writeRow($(this).closest('tr').get(0)); }); $('#checkout').on('click', function() { // on clicking the [Checkout] button var link = "mailto:me@example.com" + "?subject=" + encodeURIComponent("Order") + "&body=" + RowData.toEmailString(); console.log(link); window.location.href = link; }); // Call this function on completion of every pagination/search function restoreVisibleRows() { $('#merchTable tbody tr').get().forEach(RowData.readRow); } restoreVisibleRows(); }); 列，输入的值将保持可见。用户还可以点击“结帐”按钮，它会将该数据发布到电子邮件正文。

这一切在Safari和谷歌浏览器中都很有效。但是，在Firefox中，如果在输入中输入值然后刷新，则该值将不再位于输入中。此外，如果您点击Checkout按钮并将数据粘贴到电子邮件中，它将不会像在Safari / Chrome中那样粘贴输入值。

为什么这样做以及如何在Firefox中解决此问题？

JavaScript的：

$(function(){
    var showQuantityHeader = false;
    $(':checkbox').each(function() {
        // Iterate over the checkboxes and set their "check" values based on the session data
        var $el = $(this);
        //console.log('element id: ',$el.prop('id'),' sessionStorage[id]: ',sessionStorage[$el.prop('id')]);
        $el.prop('checked', sessionStorage[$el.prop('id')] === 'true');
        if ($el.prop('checked')) {          
            //show the quantity cell in the column under header with class num
            $el.closest('tr').find('td.quantity_num').toggle(this.checked);
            showQuantityHeader = true;
            //setupSpinner(this);
            var quantity = sessionStorage['value_'+$el.prop('id')];

        }
    });

    if (showQuantityHeader) {
            $('#merchTable').find('th.num').show();
        //console.log('header with class num: ',$('#merchTable').find('th.num'));
    }

    $('input:checkbox').on('change', function() {
        // save the individual checkbox in the session inside the `change` event, 
        // using the checkbox "id" attribute
        var $el = $(this);
        sessionStorage[$el.prop('id')] = $el.is(':checked');
        console.log($el);
    });
});

在刷新时显示输入值和数量＃列的JavaScript：

<section id="checkout-btn"> 
<button id="checkout" name="order">Checkout</button>
</section>

<br>

<table id="merchTable" cellspacing="5" class="sortable">
    <thead>
        <tr class="ui-widget-header">
            <th class="sorttable_nosort"></th>
            <th class="sorttable_nosort">Loc</th>
            <th class="merchRow">Report Code</th>
            <th class="merchRow">SKU</th>
            <th class="merchRow">Special ID</th>
            <th class="merchRow">Description</th>
            <th class="merchRow">Quantity</th>
            <th class="sorttable_nosort">Unit</th>
            <th style="display: none;" class="num">Quantity #</th>
        </tr>
    </thead>
    <tbody>

        <?php foreach ($dbh->query($query) as $row) {?>

        <tr id="<?php echo intval ($row['ID'])?>">
            <td class="ui-widget-content"><input type="checkbox" class="check" name="check" id="checkid-<?php echo intval ($row['ID'])?>"></td>
            <td class="loc ui-widget-content" data-loc="<?php echo $row['Loc'] ?>"><input type="hidden"><?php echo $row['Loc'];?></td>
            <td class="rp-code ui-widget-content" align="center" data-rp-code="<?php echo $row['Rp-Code'] ?>" id="rp-code-<?php echo intval ($row['Rp-Code'])?>"><?php echo $row['Rp-Code'];?></td>
            <td class="sku ui-widget-content" data-sku="<?php echo $row['SKU'] ?>" id="sku-<?php echo intval ($row['SKU'])?>"><?php echo $row['SKU'];?></td>
            <td class="special-id ui-widget-content" data-special-id="<?php echo $row['Special-ID'] ?>" align="center" id="special-id-<?php echo intval ($row['Special-ID'])?>"><?php echo $row['Special-ID'];?></td>
            <td class="description ui-widget-content" data-description="<?php echo htmlspecialchars($row['Description']) ?>" id="description-<?php echo intval ($row['Description'])?>"><?php echo $row['Description'];?></td>
            <td class="quantity ui-widget-content" data-quantity="<?php echo $row['Quantity'] ?>" align="center" id="quantity-<?php echo intval ($row['Quantity'])?>"><?php echo $row['Quantity'];?></td>
            <td class="unit ui-widget-content" data-unit="<?php echo $row['Unit'] ?>" id="unit-<?php echo intval ($row['Unit'])?>"><?php echo $row['Unit'];?></td>
            <td style="display: none;" class="quantity_num ui-widget-content"><input type="number" min="1" max="<?php echo $row['Quantity'];?>" step="1" style="width: 100px;" class="spinner" /></td>
        </tr>

    <?php } ?>

    </tbody>
</table>

HTML：

public static async Task SaveXMLAsync(XDocument linqXml, StorageFolder localFolder, string filename)
{
  // Create a storage file
  StorageFile file = await localFolder.CreateFileAsync(filename, CreationCollisionOption.ReplaceExisting);

  // Write the XML to a File Stream.
  using (FileStream sourceStream = new FileStream(file.Path, FileMode.Create, FileAccess.Write, FileShare.None, bufferSize: 4096, useAsync: true))
  {
    linqXml.Save(sourceStream);

    // Async flush to disk.
    await sourceStream.FlushAsync();
  };
}

编辑：