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