1

我一直在尝试用我对 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>

非常感谢您的帮助，特别是如何以及相应地添加什么以包括将来可能更多可编辑的字段。

4

2 回答 2

2

首先，您在 saveEdits() 函数中覆盖了相同的 var editElem 两次，因此您只会得到第二个。

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

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!";
}

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

然后检索此对象并在页面上填写您的字段：

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，然后在检索时将其解析回来。

于 2013-01-23T03:30:38.263 回答
0

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

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!";
 }

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

于 2013-01-23T03:10:58.307 回答