Question

我正在尝试将表单数据保存到localStorage中。对于文本框之类的常规HTML字段，此方法非常有效。但是，我有几个富文本字段，这些文本字段似乎无法保存其数据。

该字段的剃刀标记（我正在使用MVC）

<div class="form-group">
    @Html.LabelFor(model => model.Actions, htmlAttributes: new { @class = "control-label col-md-2" })
    @Html.TextAreaFor(model => model.Actions, new { @class = "form-control", rows = "4" })
    @Html.ValidationMessageFor(model => model.Actions, "", new { @class = "text-danger" })
</div>

上面生成的HTML标记：

    <div class="form-group">
        <label class="control-label col-md-2" for="Actions">Actions</label>
        <textarea class="form-control" cols="20" id="Actions" name="Actions" rows="4">
</textarea>
        <span class="field-validation-valid text-danger" data-valmsg-for="Actions" data-valmsg-replace="true"></span>
    </div>

这是用于从本地存储保存/检索的代码。我在其他领域使用完全相同的方法，并且效果很好。

//save
localStorage.setItem('Actions', document.getElementById('Actions').value);

//restore
var Actions = localStorage.getItem('Actions');
document.getElementById('Actions').value = Actions;

我尝试使用document.getElementById('Actions').textContent而不是.value-这似乎可以正确保存它，但是我仍然无法恢复文本。当我查看localStorage对象时，尽管它仅在“操作”字段中报告以下文本：" "，除非使用.textContent，在这种情况下，我会看到类似Test text 

我正在使用Summernote提供富文本功能，并认为这可能是问题的原因，但是我不确定该怎么做。控制台中根本没有报告错误。

Answer 1

我通过以下代码修复了该问题

$('#Actions').summernote('code', Actions);

代替

document.getElementById('Actions').value = Actions;

这会将字段中的html代码直接以所有格式等方式放置到summernote文本区域中。我还能够使用.actions（.innerhtml无效）

LocalStorage不允许我保存富文本字段

1 个答案: