Home  >  Article  >  Web Front-end  >  AutoSave/automatic storage function implementation_javascript skills

AutoSave/automatic storage function implementation_javascript skills

WBOY
WBOYOriginal
2016-05-16 19:16:181931browse

Reprinted from: http://www.fayland.org/journal/AutoSave.html

This function is very common. This is to prevent the browser from crashing or submitting unsuccessfully, causing the things you have worked so hard to write to disappear. This is also available in Gmail.
Its principle is to store the content of the text box into a cookie. If the submission is not successful (the reason may be that the browser crashes), the next time you visit the page, you will be asked whether to import the last stored content.
function AutoSave(it) { // it refers to the called text box
var _value = it.value; // Get the value of the text box
if (!_value) {
var _LastContent = GetCookie ('AutoSaveContent'); // Get the value of the cookie. GetCookie here is a custom function, see the source code

if (!_LastContent) return; // If the cookie has no value, it means a new start

if (confirm("Load Last AutoSave Content?")) { // Otherwise ask whether to import
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();
<p>        // SetCookie 这里就是设置该 cookie<br>        document.cookie = "AutoSaveContent=" + escape (_value) + expires;<br>    }<br>}</p>
And this HTML should be like this:
<br><script language=JavaScript src='/javascript/AutoSave.js'></script><br><form action="submit" method="POST" onSubmit="DeleteCookie('AutoSaveContent')"><br><textarea rows="5" cols="70" wrap="virtual" onkeyup="AutoSave(this);" onselect="AutoSave(this);" onclick="AutoSave(this);"></textarea><br><input type="submit"></form><br>
The first sentence imports js, and the onSubmit in the second sentence refers to if it is submitted Delete the cookie, and DeleteCookie is also a custom function. See source code.
Onkeyup in textarea refers to accessing AutoSave when a key is pressed to store newly written text.
Onselect and onclick are used to determine the automatically saved text to be imported during new visits.

That’s about it. Enjoy!

Source code: http://www.fayland.org/javascript/AutoSave.js

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn