Использование нескольких редактируемых элементов в HTML5/Javascript

Я хочу использовать, чтобы иметь возможность вводить данные на страницу, нажимать кнопку для сохранения данных, а затем сохранять и повторно открывать страницу с сохраненными данными.Использование нескольких редактируемых элементов в HTML5/Javascript

Я смог сделать это с помощью кода ниже с 1 текстовой областью, но если я использую кратность, он отображает только последние введенные данные.

Вот мой код:

<!doctype html> 
<html lang="en"> 
<head> 
<script type="text/javascript"> 
function saveEdits() { 

//get the editable element 
var editElem = document.getElementById("CPU") 
var editElem = document.getElementById("RAM") 
var editElem = document.getElementById("HDD") 
//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("CPU").innerHTML = localStorage.userEdits 
document.getElementById("RAM").innerHTML = localStorage.userEdits 
document.getElementById("HDD").innerHTML = localStorage.userEdits 
} 
</script> 
</head> 
<body onload="checkEdits()"> 
<label>Processor : </label> 
<div id="CPU" contenteditable="true"></div><br><br><br> 
<label>RAM : </label> 
<div id="RAM" contenteditable="true"></div><br><br><br> 
<label>Hard Drive : </label> 
<div id="HDD" contenteditable="true"></div><br><br><br> 
<input type="button" value="SAVE" onclick="saveEdits()"/> 
<div id="update"></div> 
</body> 
</html>

источник

2015-12-08 Chris Beese

Вы продолжаете переназначение все, чтобы та же переменная ... Вам нужно отделить все. – Antiga

... и та же проблема с 'localStorage' - вы используете только одно свойство, а не три. – Utkanos

Вы должны иметь 3 различные переменные для каждого из 3-х входов см скрипка: https://jsfiddle.net/xtat0oa6/5/

Javascript

function saveEdits() { 

    //get the editable element 
    var editElem1 = document.getElementById("CPU") 
    var editElem2 = document.getElementById("RAM") 
    var editElem3 = document.getElementById("HDD") 
     //get the edited element content 
    var userVersion1 = editElem1.innerHTML; 
    var userVersion2 = editElem2.innerHTML; 
    var userVersion3 = editElem3.innerHTML; 

    //save the content to local storage 
    localStorage.userEdits1 = userVersion1; 
    localStorage.userEdits2 = userVersion2; 
    localStorage.userEdits3 = userVersion3; 

    //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.userEdits1 != null || localStorage.userEdits2 != null || localStorage.userEdits3 != null){ 
    document.getElementById("CPU").innerHTML = localStorage.userEdits1 
    document.getElementById("RAM").innerHTML = localStorage.userEdits2 
    document.getElementById("HDD").innerHTML = localStorage.userEdits3} 
    }

источник

2015-12-08 18:39:20

Использование нескольких редактируемых элементов в HTML5/Javascript

ответ

Смежные вопросы