寫了一個實現(xiàn)表單暫存功能的jquery插件

goji 發(fā)布于2019-08-21 12:13 / 2079人閱讀

摘要：是一個實現(xiàn)通用表單暫存功能的插件原理監(jiān)控表單域變化，并使用中的來存儲這些有變化的表單域的值，并在從新加載表單時將存儲的值載入回表單域中，從而實現(xiàn)暫存功能。默認的是，在提交后若發(fā)生變化則會定位不到暫存，最好使用別的唯一值作為默認

jquery.formLocalStorage 是一個實現(xiàn)通用表單暫存功能的jquery插件

原理：

監(jiān)控表單域變化，并使用HTML5 WebStorage中的localStorage來存儲這些有變化的表單域的值，并在從新加載表單時將存儲的值載入回表單域中，從而實現(xiàn)暫存功能。

功能特點：

1.不使用服務器端存儲，節(jié)省服務器資源。

2.代碼簡練，使用默認配置的話只需一小段代碼 $("#your_form_id").formLocalStorage(); 即可搞定，無需寫一大坨服務器端邏輯。

3.豐富的配置項與默認值，通過配置項可以自定義暫存內(nèi)容的樣式，暫存加載完畢、存儲完畢與刪除完畢后的回調(diào)事件以及暫存的存儲命名規(guī)則，也可使用默認值從而減少過度的配置工作。

用法：

1.使用默認配置：

$("#your_form_id").formLocalStorage();

2.使用自定義配置：

$("#your_form_id").formLocalStorage({
    storage_name_perfix : "your_storage_name_perfix", //自定義暫存存儲的命名前綴
    storage_events : "click" //自定義暫存觸發(fā)事件
});

已知的問題：

1.有些動態(tài)寫入表單項的內(nèi)容無法監(jiān)測到，也不能暫存。

2.默認的storage_name_perfix是this.context.URL + form_selector + "@"，在提交后若this.context.URL發(fā)生變化則會定位不到暫存，最好使用別的唯一值作為默認storage_name_perfix