添加草稿功能

    我后台用的是WangEditor的富文本编辑器,因为没有自动草稿功能,已经出现过几次文章丢失的情况了,想必经常写博客的童鞋应该懂得,无故断电或者不小心关闭页面后编辑了半天的东西瞬间没了的那种感觉让人欲罢不能,有想砸电脑的冲动,后悔都来不及,昨天就因为不小心关闭了窗口导致博文丢失,故今天花了点时间来改了一下,增加了文章主体的自动缓存功能,原理其实很简单,因为没有太多时间去研究这个编辑器的API所以就没有直接在编辑器里面进行拓展。

   1.在页面中添加循环定时器,在30秒时间内循环判断编辑器内部的值val,如果编辑器内的内容发生了改变,且长度大于100个字节,就自动用localStorage方法写入本地缓存。

//自动缓存编辑器中的内容
setInterval(function(){
val = editor.$txt.html();
if (val.length >100 && val !== localStorage.getItem("日志缓存")){
localStorage.setItem("日志缓存", val);
console.log(localStorage.getItem("日志缓存"));
$('button[name=backsave]').text('缓存中');
}
},30*1000);

   2. 如果想要还原草稿缓存内的内容的话同理用Jquery操作一下Dom就完成了。

if(localStorage.getItem("日志缓存").length > 30){
$('div[id=editor-trigger]').html(localStorage.getItem("日志缓存"));
}else{
console.log('当前缓存不可用')
}

    实现起来相当简单,这样只要不清理缓存,最近一次的最新编辑状态都会保留下来,就不会出现博文无故丢失的情况了。如果你也有这样的需求,赶快自己试试吧。

留下评论

您的邮箱地址不会被公开。 必填项已用 * 标注