AutoSave/自動(dòng)存儲(chǔ)功能實(shí)現(xiàn)
轉(zhuǎn)自: http://www.fayland.org/journal/AutoSave.html
這個(gè)功能很常見(jiàn)。是為了防止瀏覽器崩潰或提交不成功而導(dǎo)致自己辛辛苦苦寫(xiě)就的東西消失掉。Gmail 里也這個(gè)東西。它的原理是將該文本框的東西存儲(chǔ)進(jìn)一個(gè) Cookie. 如果沒(méi)提交成功(原因可能是瀏覽器崩潰),下次訪(fǎng)問(wèn)該頁(yè)面時(shí)詢(xún)問(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ù),參見(jiàn)源代碼
if (!_LastContent) return; // 如果該 cookie 沒(méi)有值,說(shuō)明是新的開(kāi)始
if (confirm("Load Last AutoSave Content?")) { // 否則詢(xún)問(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ù)。參見(jiàn)源代碼。
<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í)訪(fǎng)問(wèn) AutoSave, 用以存儲(chǔ)新寫(xiě)入的文字。
而 onselect 和 onclick 用以新訪(fǎng)問(wèn)時(shí)確定導(dǎo)入自動(dòng)保存的文字。
大致就是如此。 Enjoy!
源代碼:http://www.fayland.org/javascript/AutoSave.js
相關(guān)文章
詳解JavaScript中浮點(diǎn)數(shù)的精度計(jì)算
這篇文章主要來(lái)和大家介紹一下JavaScript中浮點(diǎn)數(shù)精度計(jì)算的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解一下2023-06-06一道超經(jīng)典js面試題Foo.getName()的故事
Foo.getName算是一道比較老的面試題了,大致百度了一下在17年就有相關(guān)文章在介紹它,下面這篇文章主要給大家介紹了關(guān)于一道超經(jīng)典js面試題Foo.getName()的相關(guān)資料,需要的朋友可以參考下2022-03-03JS數(shù)組在內(nèi)存中的效率問(wèn)題淺析
用js有很久了,但都沒(méi)有深究過(guò)js的數(shù)組形式,下面這篇文章主要給大家介紹了關(guān)于JS數(shù)組在內(nèi)存中的效率問(wèn)題,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-02-02js如何刪除對(duì)象/數(shù)組中null、undefined、空對(duì)象及空數(shù)組實(shí)例代碼
JS中數(shù)組是我們較為常用的一種數(shù)據(jù)結(jié)構(gòu),下面這篇文章主要給大家介紹了關(guān)于js如何刪除對(duì)象/數(shù)組中null、undefined、空對(duì)象及空數(shù)組的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09js實(shí)現(xiàn)雙擊單元格變成文本輸入框效果代碼
單擊單元格,即可將其變?yōu)槲谋究?,方便編輯測(cè)試2008-04-04JavaScript實(shí)現(xiàn)移動(dòng)端帶transition動(dòng)畫(huà)的輪播效果
這篇文章主要介紹了JavaScript原生實(shí)現(xiàn)帶transition動(dòng)畫(huà)的自動(dòng)+手動(dòng)輪播效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03詳解wow.js中各種特效對(duì)應(yīng)的類(lèi)名
本篇文章主要介紹了wow.js中各種特效對(duì)應(yīng)的類(lèi)名 ,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09javascript實(shí)現(xiàn)計(jì)算指定范圍內(nèi)的質(zhì)數(shù)示例
這篇文章主要介紹了javascript實(shí)現(xiàn)計(jì)算指定范圍內(nèi)的質(zhì)數(shù),涉及javascript數(shù)值計(jì)算與判斷相關(guān)操作技巧,需要的朋友可以參考下2018-12-12JS如何調(diào)用WebAssembly編譯出來(lái)的.wasm文件
這篇文章主要介紹了關(guān)于WebAssembly編譯出來(lái)的.wasm文件js如何調(diào)用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-11