重新整理頁面如何儲存表單值

2019-12-12 17:28:36

在重新整理頁面時，保持表單值不變，需要用到js中的cookie來儲存資料在瀏覽器端，只要cookie不過期，無論怎樣重新整理頁面，表單值都不會變。下面介紹如何使用cookie在頁面重新整理時儲存表單值。

新建一個html頁面，命名為test.html，用於介紹如何使用cookie在頁面重新整理時儲存表單值。

在test.html頁面，在head頭部載入jquery.min.js和jquery.cookie.js檔案，成功引入這兩個檔案，就可以使用jquery中的cookie方法來儲存表單資料。

在test.html頁面，建立一個form表單，在form表單內，使用input標籤、textarea標籤，建立三個文字輸出框和一個提交按鈕。程式碼如下：

在每個輸入框標籤內，使用js中的失去焦點事件（onblur）係結標籤，在表單框失去焦點時，執行coki（）函數，下面將在cokie函數中建立表單的cookie，用於儲存資料。

註：為了方便獲得表單物件，在onblur事件的coki()內，把當前表單的id屬性作為引數傳遞給函數。

在coki（）函數中，通過傳遞過來的id獲得表單輸入框的資料，使用$.cookie()方法建立相對應的cookie，實現資料儲存在瀏覽器端。

註：$.cookie（）方法的三個引數，第一個引數是cookie的名稱，第二個引數是cookie的值，第三個引數是過期時間（這裡設定為一天）

上一步把表單輸入框的資料儲存在瀏覽器端後，現在就要實現在頁面重新整理時，把儲存在cookie中的資料讀取出來。也是使用$.cookie(）的方法，引數為cookie的名稱，把獲得的cookie資料通過val()方法給表單輸入框設定值，至此，實現了重新整理頁面儲存了表單值。

在瀏覽器開啟test.html檔案，在表單輸入框中輸入內容，重新整理頁面，每個表單的值實現了儲存，不會改變，直至重新輸入內容，表單值才會改變。