2012-05-02 6 views
2

Я создаю webapp, где у меня есть панель настроек. У меня есть код, который сохраняет данные из формы в localStorage, но как я могу заставить его заполнять форму автоматически на pageload, если есть некоторые данные, сохраненные в localStorage?заполнить форму localStorage

Это мой код для формы:

<label for="serveri"> Server: </label> 
<input type='text' name="server" id="saveServer"/> 
<button onclick="save_data()" type="button" value="Save" id="Save" data-theme="a">Save</button> 

<script> function save_data() 
{ var input = document.getElementById("saveServer"); 
localStorage.setItem("server", input.value); 
var storedValue = localStorage.getItem("server"); } 
</script> 

ответ

4

Все, что вам нужно сделать, это добавить метод ready для загрузки данных.

$(document).ready(function() { 
    $(input[name=server]).val(localStorage.getItem("server")); 
}); 

или не JQuery ответ.

function save_data() { 
    // Save functionality here... 
} 

function load_data() { 
    var input = document.getElementById("saveServer"); 
    input.value = localStorage.getItem("server"); 
} 

load_data(); 

Просто убедитесь, что ваш form существует до любого из JavaScript для заполнения ее выполнения.

Работает example.

+0

Могу ли я теоретически просто сохранить форму целиком, а затем установить значение формы в целом в форму, которую я сохранил в localstorage? –

+0

@DevinPrejean Вы можете сделать 'localStorage.setItem ('Form') = $ (form) .html();', а затем загрузить html обратно. Это может иметь неожиданные недостатки. Лучшим подходом, вероятно, будет проверка формы для имен и значений ввода, а затем сохранение их в объект Key-Value, который затем будет сохранен в localstorage с помощью JSON. –

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