如何实现 segmentfault 提问题不保存会自动创建一份草稿

由于有多个表单需要填写，每个表单未填写完成就要保存到草稿

初步想法是将表单url和表单数据记录下来，在触发onbeforeunload时间的时候保存下来，至于数据，我想存储在本地，这样减轻了服务器的压力在onload的时候读取这些数据

这里使用HTML5中的localStorage，并通过JavaScript调用。

思路大致是这样子：页面加载时从localStorage中取出缓存内容，当textarea中内容改变时将内容存入localStorage。

下面是个小小的DEMO，逻辑比较简单。

html<!DOCTYPE HTML>
<html>
<head>
<title>localStorage test</title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
    getText();
}
function getText() {
    if(typeof(localStorage.stor) != "undefined") {
        document.getElementById('myEditor').innerHTML = localStorage.stor;
    }
}
function saveText() {
    var stor = document.getElementById('myEditor').value;
    localStorage.stor = stor;
}
</script>
<textarea rows="20" cols="30" id="myEditor" onkeyup="saveText()"></textarea>
</body>
</html>

当然，在合适的时候还需要将数据POST到SERVER。

这个是通过js来操控的，触发事件（比如：输入几个字符后，一段时间后，键盘按下与弹出）这些事件，通过js都是能轻而易举的捕捉到，然后运用ajax向服务器发送请求，然后创建一份草稿。

define("autoSave", ["jquery"],
function(e) {
    var t, n, i, a = e("#editorStatus"),
    r = function() {};
    return r.prototype.bind = function(n, r) {
        t = n,
        this.form = r,
        i = this,
        e("[name=title]").on("input",
        function() {
            "" !== e.trim(e(this).val()) && i.change(),
            window.localStorage && localStorage.setItem("autoSaveTitle_" + location.pathname + location.search, e(this).val())
        }),
        t.change(function() {
            "" !== e.trim(t.getVal()) && i.change(),
            window.localStorage && window.localStorage.setItem("autoSaveContent_" + location.pathname + location.search, t.getVal())
        }),
        e("#dropIt").click(function() {
            e.post("/api/draft", {
                "do": "delete",
                id: e("#draftId").val()
            },
            function(t) {
                0 === t.status ? (a.html("已舍弃"), e("#draftId").val(""), window.localStorage && localStorage.removeItem("autoSaveContent_" + location.pathname), window.localStorage && localStorage.removeItem("autoSaveTitle_" + location.pathname), window.localStorage && localStorage.removeItem("autoSaveTag_" + location.pathname)) : a.html("舍弃失败"),
                e("#dropIt").addClass("hidden")
            })
        })
    },
    r.prototype.change = function() {
        a.html("保存中...").removeClass("hidden"),
        e("#dropIt").addClass("hidden"),
        clearTimeout(n),
        n = setTimeout(function() {
            i.save()
        },
        4e3)
    },
    r.prototype.save = function() {
        var t = this;
        e("#publishIt").attr("disabled", "disabled"),
        e.post("/api/draft", new t.form,
        function(t) {
            e("#publishIt").removeAttr("disabled"),
            0 === t.status ? (a.html("已保存草稿"), e("#dropIt").data("id", t.data).removeClass("hidden"), e("#draftId").val(t.data), window.localStorage && (window.localStorage.removeItem("autoSaveContent_" + location.pathname + location.search), window.localStorage.removeItem("autoSaveTitle_" + location.pathname + location.search))) : a.html("保存失败")
        })
    },
    new r
})

以上是 SF 的源码，从源码上来看，其实就是在 textarea 发生 change 的时候发送一个 post 而已。等到页面关闭的时候再保存这样不能保证实时性啦，有时候页面崩溃什么的完全没办法的诶，所以还是得定时操作。本地的话 SF 也是有存一份的，但是如果光是本地的话也不行啊，这样并不能保证用户多点登陆的草稿问题诶，所以还是要发送 post 存到服务器上。

onbeforeunload的时候太晚了，况且不是任何情况下都会触发。
每秒把所有文本框内容保存到localStorage里吧。

localStorage[key]=value

【热门文章】