contenteditable＆localstorage與多個字段的問題

我一直在試圖解決這與我有HTML5的基本知識，但我想要做的是允許訪問者在一個頁面上編輯多個表單域，然後保存它們使用localstorage可以在重新訪問該頁面時查看這些更改。contenteditable＆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>

幫助會特別欣賞的方式和內容，以添加相應的將來可能包含更多可編輯的字段。

來源

2013-01-23 user1823055

'edit2'的目的是什麼？ –

@ArunPJohny這是第二個表單域，它允許用戶輸入附加信息。圖片模板系統 - 允許頁面上的許多內容直接在頁面上進行編輯。 – user1823055

它似乎在這裏工作正常http://jsfiddle.net/arunpjohny/b36tH/ –

首先，您在saveEdits（）函數中重寫了兩次相同的var editElem，因此您將只獲得第二個。

如果你有很多領域，這將是一個好主意，將它們存儲在一個對象，並將其保存到localStorage的，像這樣：與現場所以基本上你有一個對象（editElems）

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作爲一個關鍵和它的價值。

然後檢索這些對象，並填寫頁面上的字段：

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-23 03:30:38 dmk

我在這裏試過你的例子：http://jsfiddle.net/stepiiapp/AKz5a/2/但沒有成功。然後我在我的電腦上試了一下，看起來沒有任何反應，當點擊保存按鈕時沒有保存任何東西。 – user1823055

我爲第一個字段使用了不同的id（edit1）。 – dmk

更新了小提琴 - 再次沒有反應從更新 – user1823055

如果我理解你如何試圖正確地做到這一點，問題是，你必須：

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-23 03:10:58

contenteditable＆localstorage與多個字段的問題

回答

相關問題