Question

我一直在努力用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>

非常感谢帮助，特别是如何以及相应添加的内容，以便在将来包含可能更具可编辑性的字段。

Answer 1

首先，你在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!";
}

所以基本上你有一个对象（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，然后在检索时将其解析回来。

Answer 2

如果我理解你是如何正确地做到这一点的，问题是你有：

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

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

可满足的问题＆amp;具有多个字段的localstorage

2 个答案: