Question

我有这个代码可以创建一个可编辑的新列表项（li）（contenteditable="true"）：

var currenthtml = document.getElementById("0").innerHTML;
var newhtml = currenthtml + '<li class="object" contenteditable="true">...</li>';

对象已创建且可见，编辑后#0的purehtml为：

<div id="0">
    <li class="object" contenteditable="true">First object</li>
</div>

要保存内容，我有以下帮助：

function SaveObject(html) {
    localStorage.setItem("obj", html);
}

因为以下原因而被调用：

$('li[contenteditable]').keydown(function(e) {
    if (e.keyCode === 13) {
        document.execCommand('insertHTML', false, '');
        $(this).blur();

        var html = document.getElementById("0").innerHTML;
        SaveObject(html);

        return false;
    }
});

（我将更改它以保存在其他情况下，但这是当前的保存方法。）

但是当我编辑新项目并尝试保存时，它不会保存文本。它暂时停留在那里，但随后更改为默认值＆＃34; ...＆＃34;。我怎样才能做到这一点？

＃0以这种方式设置

if(localStorage.getItem("obj") != null) {
    document.getElementById("0").innerHTML = localStorage.getItem("obj");
}

Answer 1

嗯，你应该检查几个步骤：

在keydown处理程序中，检查html：

的值

$('li[contenteditable]').keydown(function(e) {
    if (e.keyCode === 13) {
        document.execCommand('insertHTML', false, '');
        $(this).blur();

        var html = document.getElementById("0").innerHTML;
        console.log(html); // is the value equal to what is expected?
        SaveObject(html);

        return false;
    }
});

其次，尝试检查保存后是否直接保存到本地存储：

$('li[contenteditable]').keydown(function(e) {
    if (e.keyCode === 13) {
        document.execCommand('insertHTML', false, '');
        $(this).blur();

        var html = document.getElementById("0").innerHTML;
        SaveObject(html);
        console.log(localStorage.getItem("obj")); // is the value equal to what was saved?

        return false;
    }
});

如果两个答案为“是”，请在重新加载页面后查看该值：只需在控制台中输入localStorage.getItem("obj")即可。
最后，如果数据仍然存在，请确保将其实际添加回DOM。您尚未向我们展示将包含已保存数据的列表项添加到页面的代码。

Javascript对innerhtml创建的对象很满意

1 个答案: