2013-04-01 3 views
-1

Это код, который я использую для публикации строки на моей странице html динамически, проблема в том, что страница пуста, когда я ее обновляю, я хочу, чтобы строка была написана постоянно на страниценаписать на html странице динамически

<html> 
    <br><br>post a question <br> 
    <br><br><textarea id="t"></textarea><br> 
    <br><br><button id='a'>Post</button> 
    <div id='updateDiv'></div> 

    <script language= "javascript"> 
    function displayDate() 
    { 
    var comment = document.getElementById("t").value; 
    var newParagraph = document.createElement('p'); 
    newParagraph.textContent = comment; 
    document.getElementById("updateDiv").appendChild(newParagraph); 
    document.getElementById("t").value = ""; 
    } 

    document.getElementById("a").onclick = displayDate; 
    </script> 
    </html> 
+3

Если вы хотите сохранить данные, вам, возможно, придется использовать какие-то серверные технологии, такие как php, java для сохранения данных на сервере, чтобы позже вы могли получить их. –

+1

Если вы хотите сохранить его локально для какой-либо цели, вы можете думать о cookie или если вы хотите поддерживать только новые браузеры, вы можете думать о localStorage –

ответ

3

При обновлении страницы он производит новый запрос на сервер для всей страницы. Это означает, что он получает совершенно новую копию разметки, которая затем выполняет этот скрипт, снова добавляя пустой абзац. Невозможно изменить это поведение обновления браузера.

2

Вам необходимо либо использовать серверный язык для хранения значений, либо использовать что-то вроде localstorage.

Пример использования LocalStorage

(function() { 

    var outDiv = document.getElementById("updateDiv"); 

    function displayDate() { 
     var comment = document.getElementById("t").value; 
     var newParagraph = document.createElement('p'); 
     newParagraph.textContent = comment; 
     outDiv.appendChild(newParagraph); 
     localStorage.setItem("data", outDiv.innerHTML); 
     document.getElementById("t").value = ""; 
    } 

    document.getElementById("a").onclick = displayDate; 
    var str = localStorage.getItem("data"); 
    if (str) { 
     outDiv.innerHTML = str; 
    } 

})(); 

JSFiddle

Просто помните, что использование LocalStorage означает, что он доступен только для этого пользователя в этом браузере. Если вы хотите, чтобы больше людей увидели это, вам нужно использовать решение для серверов.