1

私は HTML5 に関する基本的な知識でこれを解決しようとしていますが、私がやろうとしているのは、訪問者が 1 つのページで複数のフォーム フィールドを編集できるようにし、それらの変更を再確認できる localstorage を使用して保存することです。 -ページにアクセスします。

これは、チュートリアルからこれまでに使用したものです: http://www.developerdrive.com/2012/06/allowing-users-to-edit-text-content-with-html5/

何が起こっているのかというと、フィールド 2 がフィールド 1 を上書きしていて、これは私の期待した結果ではありません。期待される結果 = 各編集可能領域は、編集が行われた後も独自の編集状態を保持する必要があります。ページには約 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 を 2 回オーバーライドしているため、2 番目のものだけが取得されます。

多くのフィールドがある場合は、それらを 1 つのオブジェクトに格納し、次のように 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");

これを行うと、2 行目で の値が変更される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 に答える