刷新頁面如何保存表單值

新建一個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文件，在表單輸入框中輸入內容，刷新頁面，每個表單的值實現了保留，不會改變，直至從頭輸入內容，表單值才會改變。

0 條評論