具有多个字段的内容可编辑和本地存储的问题

Problems with contenteditable & localstorage with multiple fields

本文关键字：编辑 问题 存储 字段      更新时间：2023-09-26

我一直在尝试用HTML5的基本知识来解决这个问题，但是我想做的是允许访问者在一个页面上编辑多个表单字段，然后使用localstorage保存它们，能够在重新访问页面时看到这些更改。

这是我到目前为止从教程中使用的内容：http://www.developerdrive.com/2012/06/allowing-users-to-edit-text-content-with-html5/

正在发生的事情是字段二正在覆盖字段一，这不是我的预期结果。预期结果 = 每个可编辑区域在进行编辑后应保留其自己的编辑状态。页面上大约有 63 个字段，但为了简单起见，我包括了 2 个字段。

JavaScript：

<script type="text/javascript">
function saveEdits() {
//get the editable element
var editElem = document.getElementById("edit");
var editElem = document.getElementById("edit2");
//get the edited element content
var userVersion = editElem.innerHTML;
//save the content to local storage
localStorage.userEdits = userVersion;
//write a confirmation to the user
document.getElementById("update").innerHTML="Edits saved!";
}
function checkEdits() {
//find out if the user has previously saved edits
if(localStorage.userEdits!=null)
document.getElementById("edit").innerHTML = localStorage.userEdits;
}
</script>

.HTML：

<body onload="checkEdits()">
<div id="edit" contenteditable="true">LASTNAME</div> 
<div id="edit2" contenteditable="true">FIRSTNAME</div>
<input type="button" value="save my edits" onclick="saveEdits()"/>
<div id="update"> - Edit the text and click to save for next time</div>
我们将

不胜感激，特别是如何以及相应地添加什么以包含将来可能更多可编辑的字段。

首先，你在saveEdits（）函数中覆盖了同一个var editElem两次，所以你只会得到第二个。

如果您有很多字段，最好将它们存储在一个对象中并将其保存到本地存储中，如下所示：

function saveEdits() {
    //get the editable elements.
    var editElems = {
        'edit1': document.getElementById('edit1').innerHTML,
        'edit2': document.getElementById('edit2').innerHTML
    };
    //save the content to local storage. Stringify object as localstorage can only support string values
    localStorage.setItem('userEdits', JSON.stringify(editElems));
    //write a confirmation to the user
    document.getElementById("update").innerHTML="Edits saved!";
}

所以基本上你有一个对象（editElems），字段ID作为键及其值。

然后，要检索此对象并在页面上填写字段，请执行以下操作：

function checkEdits(){
    //find out if the user has previously saved edits
    var userEdits = localStorage.getItem('userEdits');
    if(userEdits){
        userEdits = JSON.parse(userEdits);
        for(var elementId in userEdits){
          document.getElementById(elementId).innerHTML = userEdits[elementId];
        }
    }
}

请注意，只有字符串值可以存储在 localStorage 中，因此在保存对象时必须使用 JSON.stringify，然后在检索时解析回它。

如果我了解您如何正确执行此操作，那么问题是您有：

var editElem = document.getElementById("edit");
var editElem = document.getElementById("edit2");

执行此操作时，第二行会更改 editElem 的值，因此不能再使用第一个值。

我怀疑你想使用 for 循环： 

 function saveEdits() {
      for (var i = 0; i < something; i++) {
            // get the editable element
            var editElem = document.getElementById("edit" + i)
            //get the edited element content
            var userVersion = editElem.innerHTML;
            //save the content to local storage
            localStorage.userEdits = userVersion;
      }
      //write a confirmation to the user
      document.getElementById("update").innerHTML="Edits saved!";
 }

您还必须为本地存储中的每个值使用不同的键，大概遵循相同的模式。

相关文章：