Retrieving LocalStorage to TextBox

Question

0.00/5 (No votes)

See more:

Hello. I am using the following code to get and set data to the LocalStorage on the user's device:

HTML

localStorage.setItem("name", "Hello World!");
document.write(localStorage.getItem("name")); //Hello World!

This simply saves the LocalStorage data and then displays it on the web page as a test. Now, how can I get and set that data from/to a textbox?

Here's the code I'm using for my textbox:

HTML

<form>
    <label>Company Name:</label>
    <input name="companyname" placeholder="Type Here" type="text">
</form>

Thanks in advance!

Posted 21-Feb-12 18:26pm

drummerboy0511

Add a Solution

2 solutions

Solution 1

Hope you will find this useful.

JavaScript

<script language="JavaScript">
	function loadFromLocalStorage() {
		var frmObjects = document.forms[0].elements;
		for(obj in frmObjects) {
			if(obj.type = 'textbox' && obj.name != null && localStorage.getItem(obj.name) != null) {
				obj.value = localStorage.getItem(obj.name);
			}
		}
	}
</script>
<form>
	<label>Company Name:</label>
	<input name="companyname" placeholder="Type Here" type="text"  önblur="localStorage.setItem(this.name, this.value)">
</input></form>

I have just provided a concept on how you can achieve your requirements. You might need to modify this code snippet as per your need.

Thanks & Regards,
Niral Soni

Posted 23-Feb-12 9:09am

Niral Soni

v2

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

drummerboy0511 · Accepted Answer · 2012-03-18T17:35:00

I found a solution that works.

I gave the textbox an ID of "companyname", and I changed the setting saving code to:

JavaScript

var companyNameInput = document.getElementById("companyname");
localStorage["companyName"] = companyNameInput.value;

And here's what I used to load the setting:

JavaScript

var companyNameInput = document.getElementById("companyname");
var companyNameSetting = localStorage["companyName"];

// Load the Company Name.
if (companyNameSetting == null) {
    companyNameInput.value = "";
}
else {
    companyNameInput.value = companyNameSetting;
}

Retrieving LocalStorage to TextBox

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0

Retrieving LocalStorage to TextBox

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us