在網頁開發中,表單是必不可少的元素。然而,有時候我們需要將表單暫存下來,等待用戶下一次編輯。這時候,jQuery提供了一個簡單而有效的方法,讓我們來看看如何設置吧。
首先,我們需要在表單中設置一個id,比如說“myForm”。然后,在jQuery中,我們需要使用localStorage對象來暫存表單。這個對象允許我們在用戶的瀏覽器中永久存儲數據。具體代碼如下:
$(document).ready(function(){ if(localStorage.getItem('myForm')!== null){ var formData = JSON.parse(localStorage.getItem('myForm')); $.each(formData, function(name, value){ $('#'+name).val(value); }); } }); $('#myForm').on('change', function(){ var formData = $(this).serializeObject(); localStorage.setItem('myForm', JSON.stringify(formData)); }); $.fn.serializeObject = function(){ var formData = {}; var formArray = this.serializeArray(); $.each(formArray, function(){ if(formData[this.name] !== undefined){ if(!formData[this.name].push){ formData[this.name] = [formData[this.name]]; } formData[this.name].push(this.value || ''); } else { formData[this.name] = this.value || ''; } }); return formData; };
這段代碼主要分為三部分:
- 首先是頁面加載時的判斷,如果localStorage中已經存在myForm,則將數據填充回表單中。
- 接著是表單內容改變時的處理。我們將表單轉換成對象并將其存儲到localStorage中。
- 最后是實現表單轉換為對象的方法。
這樣,我們就實現了一個簡單的表單暫存功能。用戶可以在不同時間段內編輯表單,下次打開頁面后依然可以看到上一次的編輯結果。