javascript - Populate form with localStorage - Stack Overflow

admin管理员组

文章数量:1410737

I'm building a webapp where I have a settings panel. I have a code that saves data from form to localStorage, but how could I make it populate the form automatically on pageload if there is some data saved to localStorage?

This is my code for the form:

<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> 

I'm building a webapp where I have a settings panel. I have a code that saves data from form to localStorage, but how could I make it populate the form automatically on pageload if there is some data saved to localStorage?

This is my code for the form:

<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> 

• javascript
• forms
• jquery-mobile
• local-storage

Share Follow edited Jul 13, 2015 at 16:58 Brant Olsen 5,66455 gold badges3939 silver badges5353 bronze badges asked May 2, 2012 at 10:40 user1358625user1358625 23522 gold badges66 silver badges1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

All you need to do is add a ready method to load the data.

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

Or non-JQuery answer.

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

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

load_data();

Just make sure your form exists before any of the JavaScript to populate it is executed.

Here is a working example.

本文标签： javascriptPopulate form with localStorageStack Overflow