AutoSave/自動存儲功能實現(xiàn)
更新時間：2007年03月24日 00:00:00 作者：
轉(zhuǎn)自: http://www.fayland.org/journal/AutoSave.html
這個功能很常見。是為了防止瀏覽器崩潰或提交不成功而導致自己辛辛苦苦寫就的東西消失掉。Gmail 里也這個東西。它的原理是將該文本框的東西存儲進一個 Cookie. 如果沒提交成功（原因可能是瀏覽器崩潰），下次訪問該頁面時詢問是否導入上次存儲的東西。
function AutoSave(it) { // it 指調(diào)用的文本框
var _value = it.value; // 獲得文本框的值
if (!_value) {
var _LastContent = GetCookie('AutoSaveContent'); // 獲得 cookie 的值，這里的 GetCookie 是個自定義函數(shù)，參見源代碼
if (!_LastContent) return; // 如果該 cookie 沒有值，說明是新的開始
if (confirm("Load Last AutoSave Content?")) { // 否則詢問是否導入
it.value = _LastContent;
return true;
}
} else {
var expDays = 30;
var exp = new Date();
exp.setTime( exp.getTime() + (expDays * 86400000) ); // 24*60*60*1000 = 86400000
var expires='; expires=' + exp.toGMTString();
而這 HTML 中應當如此：// SetCookie 這里就是設置該 cookie
document.cookie = "AutoSaveContent=" + escape (_value) + expires;
}
}
第一句導入 js, 第二句的 onSubmit 指如果提交了就刪除該 cookie, 而 DeleteCookie 也是自定義的一個函數(shù)。參見源代碼。
<script language=JavaScript src='/javascript/AutoSave.js'></script>
<form action="submit" method="POST" onSubmit="DeleteCookie('AutoSaveContent')">
<textarea rows="5" cols="70" wrap="virtual" onkeyup="AutoSave(this);" onselect="AutoSave(this);" onclick="AutoSave(this);"></textarea>
<input type="submit"></form>
textarea 里的 onkeyup 是指當按鍵時訪問 AutoSave, 用以存儲新寫入的文字。
而 onselect 和 onclick 用以新訪問時確定導入自動保存的文字。
大致就是如此。 Enjoy!
源代碼：http://www.fayland.org/javascript/AutoSave.js
相關文章
談談基于iframe、FormData、FileReader三種無刷新上傳文件的方法
發(fā)請求有兩種方式，一種是用ajax，另一種是用form提交，默認的form提交如果不做處理的話，會使頁面重定向。本篇文章通過實例給大家介紹基于iframe/FormData/FileReader三種無刷新上傳文件的方法，感興趣的朋友一起學習吧2015-12-12
這篇文章主要給大家介紹了關于uniapp小程序底部tabbar圖標大小設置辦法的相關資料,在使用uniapp進行開發(fā)時,tabbar是我們使用的很頻繁的一個組件,但是在特定的平臺會有一些使用上的限制,需要的朋友可以參考下2023-08-08
微信小程序?qū)崿F(xiàn)Timeline時間線效果
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)Timeline時間線效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
JS與Jquery獲取屏幕、瀏覽器、頁面的寬度和高度對比整理
頁面的展示，從外到內(nèi)的容器為：屏幕、瀏覽器以及頁面本身。HTML元素展現(xiàn)在頁面內(nèi)，頁面展現(xiàn)在瀏覽器內(nèi)，而瀏覽器展現(xiàn)在屏幕內(nèi)。通過Js的一些對象可以獲取這些容器的高度、寬度。容器的尺寸是指當前分辨率下的高度和寬度（分辨率不同，值就不相同）。2023-02-02
現(xiàn)在使用手機上網(wǎng)的人越來越多，一些下載網(wǎng)站會通過判斷不同系統(tǒng)手機來訪問不同網(wǎng)頁，比如iPhone和Android。下面我們就來介紹一下如何用javascript判斷iPhone或Android手機訪問2015-07-07
比較了下Bootstrap的popover和一些其它的開源項目，覺得Bootstrap的還算不錯。在使用過程中遇到了一系列問題，下面小編給大家分享Bootstrap彈出框（Popover）被擠壓的問題小結，需要的朋友參考下吧2017-07-07
下面小編就為大家?guī)硪黄猨s刪除Array數(shù)組中指定元素的兩種方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了服務端預渲染之Nuxt(使用篇)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
javascript原生封裝一個淡入淡出效果的函數(shù)測試實例代碼
這篇文章主要介紹了javascript原生封裝一個淡入淡出效果的函數(shù),主要有FadeIn淡入函數(shù)和FadeOut淡出函數(shù)，需要的朋友可以參考下2018-03-03
javascript實現(xiàn)鼠標放上后下邊對應內(nèi)容變換的效果
這篇文章主要介紹了javascript鼠標放上后下邊對應內(nèi)容變換的方法,實例分析了javascript實現(xiàn)tab切換的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08