在后台编辑内容时可能会不小心关掉浏览器,也可能突然断电导致辛辛苦苦写好的内容丢失。
解决这种忧虑,cookie的作用就可以利用起来了,因为它可以讲你的内容实时保存。
要实现cookie首先先下载js插件
下载网址:http://plugins.jquery.com/cookie/。
然后在页面引入就可以编码了
我这里结合了编辑器和easyui来做的,比编辑器开发可以参照我上上篇文章
//全局变量
var _value;
window.onload=function(){
_value=editor.html();
if(_value!=""||_value!=undefined){//判断编辑器中有无内容存在,有就不提示是否恢复
var _LastContent = GetCookie('page')//获取cookie,
if (_LastContent==null){
startSave();//开始保存方法
return;
}
$.messager.confirm("系统提示","是否恢复未保存数据?",function(isOk){
//结合easyui做的,没用框架直接confirm就行了
if(isOk){
renew(_LastContent);/将cookie的内容写入到编辑器中
startSave();
}
})
}
else{
startSave();
}
}
function AutoSave() {
$("#message").show();//一个提示的div
setTimeout("xiaoshi()",2000);//2秒,可以改动 定时器
_value=editor.html();得到编辑器中的内容
var expDays = 30;
var exp = new Date();
//设置保存的时间24小时
exp.setTime( exp.getTime() + (expDays * 86400000) ); // 24*60*60*1000 = 86400000
var expires='; expires=' + exp.toGMTString();
// SetCookie
document.cookie = "page=" + escape (_value) + expires;//保存cookie,page为保存的cookie名
}
function xiaoshi(){
$("#message").hide();
}
function renew(_LastContent){
editor.html(_LastContent);
startSave();
return true;
}
function getCookieVal (offset) {
var endstr=document.cookie.indexOf (";",offset);
if (endstr==-1) endstr=document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name){//获取cookie
var arg=name+"=";
var alen=arg.length;
var clen=document.cookie.length;
var i = 0;
while (i<clen){
var j=i+alen;
if (document.cookie.substring(i,j)==arg) return getCookieVal (j);
i = document.cookie.indexOf(" ",i)+1;
if (i==0) break;
}
return null;
}
function DeleteCookie (name) {//删除cookie,传入的name要与上班保存cookie时的一致
var exp=new Date();
exp.setTime (exp.getTime()-1);
var cval=GetCookie (name);
var matter=editor.html();
if(matter==""){//这里是给提交方法判断用的,可以不要return
alert("无内容");
return false;
}
document.cookie= name + "="+cval+";expires="+exp.toGMTString();//清除cookie
return true;
}
function startSave(){
timer1 = setInterval(function(){//一个定时器,
//不等于空且有改动时才自动保存
if(editor.html()!=""&&editor.html()!=GetCookie('page')){
AutoSave();
}
},30*1000);//毫秒为单位,可改
}
//清空内容
function empty(){
$.messager.confirm("系统提示","是否清空草稿?",function(isOk){
if(isOk){
if(DeleteCookie ('page')){
editor.html("");
}
}else{
editor.html("");
}
})
}