頁面刷新時在輸入字段中保留值

我一直試圖永遠保持用戶在刷新頁面時添加的輸入字段的值，但沒有成功。我想知道是否有人可以幫助我，直到網頁重新加載時，我纔得到輸入字段。如果它有幫助，我使用JQuery和PHP。我的JQuery代碼位於下方。頁面刷新時在輸入字段中保留值

JQuery的

$(document).ready(function(){ 
    var max_fields = 10; 
    var x = 1; 

    if(typeof(Storage) !== 'undefined'){ 
     $('.worker').on('click', function(e){ 
      e.preventDefault(); 
      e.stopPropagation(); 

      if(x < max_fields){ 
       x++; 

       $(this).closest('li').find('div:eq(3)').append('<input type="text" name="first_name[]" /><input type="text" name="last_name[]" /><select name="title[]" class="title"><option value="Select a Title" selected="selected">Select a Title</option><option value="Boss">Boss</option><option value="Worker">Worker</option><option value="Manager">Manager</option></select>'); 

       sessionStorage.setItem('Data',$(this).closest('li').find('div:eq(3)').html()); 
      } 
     }); 

     if(sessionStorage.getItem('Data')){ 
      $('.worker').closest('li').find('div:eq(3)').html(sessionStorage.getItem('Data')); 
     } 
    } 
});

來源

2016-07-26 obi

您需要一種機制來：

想出一個辦法，將數據保存到會話存儲所有輸入
觸發數據保存到會話存儲（如按鈕或輸入更改）
在重新加載時遍歷所有會話存儲並找到您感興趣的內容
填充與數據

這裏的領域是兩個文本輸入的示例：

$(document).ready(function() { 
    if(typeof(Storage) !== 'undefined'){ 
    populateInputs(); 
    } 

    function populateInputs(){ 
     for(var i=0; i<sessionStorage.length; i++) { 
     var temp = sessionStorage.key(i); 
     if(temp.startsWith('inputData')) { 
      console.log('Setting ' + temp.split('-')[1] + 
      ' to ' + sessionStorage.getItem(temp)); 
      $('#'+temp.split('-')[1]).val(sessionStorage.getItem(temp)); 
     } 
     } 
    } 

    $('.saveInput').on('input', function(){ 
     sessionStorage.setItem('inputData-'+this.id, this.value); 
    }); 
});

的HTML：在https://plnkr.co/edit/MrAUBAMALOmYRwxLqBs0?p=preview

來源

2016-07-26 03:31:20 User528491

那麼select字段呢？ – obi

您可以修改代碼以包含其他輸入字段 – User528491

<label>First Name :</label><input type="text" class="saveInput" id="firstname"></input> <br> 
<label>Last Name :</label><input type="text" class="saveInput" id="lastname"></input>

運行例如，你可以保持每input和select（和其他如果需要）本地存儲中的值，s大小卸載並在頁面加載時重新加載。見簡單的例子：

$(document).ready(function() { 
    $(window).unload(saveSettings); 
    loadSettings(); 
}); 

function loadSettings() { 
    $('input, select').each(function(i,o) { 
     $(o).val(localStorage[$(o).attr('id')]) 
    }); 
} 

function saveSettings() { 
    $('input, select').each(function(i,o) { 
     localStorage[$(o).attr('id')] = $(o).val(); 
    }); 
}

該實施例節省的輸入，並且選擇基於它們的id屬性的鍵 - 值對。它是動態的，易於擴展。

See it running

來源

2016-07-26 08:13:23 DDan

頁面刷新時在輸入字段中保留值

回答

相關問題