如何在本地存儲HTML表單數據？

我正在製作一個HTML表單，我需要我的用戶在關閉窗口/選項卡並重新打開之後能夠找回他們填滿的任何數據。如何在本地存儲HTML表單數據？

如果我使用JavaScript cookies或HTML 5本地存儲，那麼我將不得不爲每一個輸入標籤編寫代碼，即使它的數量是千分之一。

那麼，最有效的方法是什麼？

P.S.我使用PHP進行後端處理。

我想要的功能就像我們在瀏覽器中使用firefox或chrome恢復會話一樣。

來源

2015-08-24 Aman Kumar

@PraveenKumar我的不好。跳入結論。 – RRK

*關閉窗口/選項卡並重新打開後，他們填滿的任何數據。*這對我來說還不清楚。您想要什麼？這意味着什麼？ mabe ** Session **可以幫助您 – donald123

真的沒有辦法迭代您的輸入字段嗎？ – user3154108

你可以像這樣使用localstorage。

localStorage.setItem('formData', JSON.stringify($('form').serialize())); //comfortable java script way.

或Cookie，可以喜歡這個

$.cookie('formData', JSON.stringify($('form').serialize())); //can support old browsers also.

請閱讀storage-vs-cookies優良接受的答案，你會知道使用哪一個。

來源

2015-08-24 11:58:13 Raghavendra

LocalStorage是您的最佳選擇。

我將不得不爲每一個輸入標籤編寫代碼，即使它像數千個一樣。

這是不正確的。您可以使用JS循環，或一個jQuery各，要做到這一點：

$("input").each(function(){ 
       $(this).val(storage.getItem($(this).attr("id"))); 
      }) 
      .change(function(){ 
       storage.setItem($(this).attr("id"), $(this).val()); 
      });

頁面加載後，您將遍歷頁面上的每個輸入，並把內容到它基於輸入的ID.Then你附上所有輸入的事件監聽器，將所有更改保存到本地存儲中。

我還沒有測試過這個，它只是爲了插圖的目的。這段代碼可能不會馬上起作用，但我希望你能理解這個概念。

來源

2015-08-24 11:53:11

如何在本地存儲HTML表單數據？

回答

相關問題