今天在用Simditor富文本编辑器的时候，为了良好的用户体验，发表文章内容的时候，需要有一个自动保存的功能，实现自动保存的方法也有很多，可以用数据库，也可以用其它的。
由于我这要求不是很高，Simditor官方也提供一个“simditor-autosave”自动保存功能的扩展，因此我们就用它吧！
一、官方扩展：
simditor-autosave：自动保存功能
github地址：https://github.com/mycolorway/simditor-autosave
二、实现原理：
Simditor 的官方扩展：simditor-autosave，它运用 HTML5 的 localStorage 技术来自动保存用户输入内容。
localStorage有点类似于cookie，两者主要的区别就是：生存期与大小。
localStorage理论上来说是永久有效的，即不主动清空的话就不会消失，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错。
localStorage目前业界基本上大小统一为5M，已经比cookies的4K要大很多了。
下面先给大家看一下Local Storage究竟是什么样子的？
我这用谷歌浏览器，F12就可以看到，其它浏览器同理，具体如下图：
三、使用方法：
第一步：下载simditor-autosave
我是直接下载的zip的，解压后，simditor-autosave.js在lib文件夹里面。
第二步：在 Simditor 的基础上额外引用 simditor-autosave 的脚本
<script src="/simditor/simditor-autosave.js?x61917"></script>
第三步：配置保存路径，也就是设置 localStorage 的 Key。
配置这里有三种方法，下面分别给大家说一下，如下：
方法 一：
直接在使用了 Simditor 对应的 textarea 中设置 data-autosave 属性，其值将作为内容保存时的路径。 例如下面的设置数据将保存在 url_path/editor-content/autosave/ 中
<textarea id="txt-content" data-autosave="editor-content" autofocus></textarea>
方法二：
在 Simditor 初始化时，直接写入配置信息中，例如下面的设置，效果跟上面一样， 数据也将保存在 url_path/editor-content/autosave/ 中
new Simditor({
textarea: textareaElement,
...,
autosave: 'editor-content'
})
方法三：
在 Simditor 初始化时，可直接指定数据保存路径，如：
new Simditor({
textarea: textareaElement,
...,
autosavePath: '/url_path/editor-content/autosave'
})
注意：
当方法 一和方法二同时定义时，则优先选择方法 一中的参数作为保存时的路径。
另外，可通过 autosave: false 关闭自动保存。
四、Simditor自动保存 使用示例
以我这里PHP为例子，我就是直接采用的是 在 Simditor 初始化时，直接指定数据保存路径，也就是相当于设置 localStorage 的 Key。
1、配置自动保存路径
为了方便，以及易于识别，我设置 localStorage 的 Key就用了：$requesturl = $_SERVER['REQUEST_URI']，这样也算是为了简单的保证唯一性吧！
<script>
toolbar = [ 'title', 'bold', 'italic', 'underline', 'strikethrough',
'color', 'fontScale', 'ol', 'ul', 'blockquote', 'code', 'table',
'link', 'image', 'hr', 'indent', 'outdent','alignment' ,'html'];
var editor = new Simditor({
textarea : $('#editor'),
placeholder : '',
pasteImage: true,
autosavePath: "<?php echo $requesturl; ?>",//自动保存，这里相当于设置localStorage的key
toolbarFloat:true,
toolbar : toolbar, //工具栏
defaultImage : '/default/images/280-210.jpg', //编辑器插入图片时使用的默认图片
cleanPaste:true,
upload : {
url : "<?php echo $HOMEURL.$ADMIN_ADDRESS; ?>?type=image&action=simditor", //文件上传的接口地址
params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
fileKey: 'upload_file', //服务器端获取文件数据的参数名
connectionCount: 3,
leaveConfirm: '正在上传文件'
}
});
</script>
2、localStorage清除
从上面大家都知道了，localStorage理论上来说是永久有效的，如果我们的文章内容发送成功了，是不是应该清除呢？如果你不清除，你发新的文章，又会有localStorage数据，这肯定是不行的。
我在文章发送成功这里再加一段PHP代码：
echo "<script>localStorage.setItem('".$requesturl."', '');</script>" ;//使用 localStorage 创建一个本地存储的 key/value 对，这里设置为空，相当于清空或
echo "<script>localStorage.removeItem('".$requesturl."');</script>" ;//使用 localStorage 清楚指定数据
注意：
这里的 key 一定要设置和之前一样的，必须是相同的。否则会清理错误！当然了，你也可以全部清除，但是我不建议那么做，如果有自动保存的内容呢？岂不是全部清除了？
清除所有数据
localStorage.clear();
