how to save in local storage? (html 5 new features)

**RakiZtahX** · Feb 18, 2013 10:28

i want to save file in local storage and post it under the table to be able to see it.. how can i do that?

HTML Code:

<html>
	<head>
		<title>Offline App(Traffic Enforcement)</title>
		<link rel="stylesheet" type="text/css" title="Preferred" href="popAddVio.css" />
		
		<script type="text.javascript">
			
		
		function save() {
			try {
			var date = document.getElementById('textDate').value;
			var plate = document.getElementById('textPlate').value;
			var name = document.getElementById('textName').value;
			var address = document.getElementById('textAddress').value;
			
			localStorage.lDate = date;
			localStorage.lPlate = plate;
			localStorage.lName = name;
			localStorage.lAddress = address;
			
			} catch (e) {
				alert("Error save");
			}
		}		
		function load() {
		
			var storedValue = localStorage.lDate;
			if (storedValue) {
				document.getElementById('date').value = storedValue;
			}
		}
		</script>
	</head>
	
	<body >
	
		<header>
			<h1>Add Violations</h1>
		</header>
		
		<div id="vioForm">
			<form>
				<table border="0" width="400" align="center">
					<tr>
					<td><label>Date:</label></td>
					<td><input id="vioDate" type="date" name="textDate" value="2011-01-13"/></td>
					</tr>
					<tr>
					<td><label>Plate #:</label></td>
					<td><input id="vioPlate" type="text" name="textPlate"</td>
					<tr>					
					<td><label>Driver's Name:</label></td>
					<td><input id="vioName" type="text" name="textName" /></td>
					</tr>
					<tr>							
					<td><label>Address:</label></td>
					<td><input id="vioAddress" type="text" name="textAddress"/></td>
					</tr>
					<tr>
					<td><label>Violation:</label></td>
						<td><select id="combo">
						   <option value="move"> Moving Violation </option>
						   <option value="park"> Parking Violation </option>
						</select></td>
					</tr>
				
				</table>
			</form>
		</div>
		
		<div>
			<form id="buttons">
				<input type="button" value="SAVE" onclick="save()" />
				<input type="button" value="CLOSE" onclick="window.close()" />
			</form>
		</div>
		
			
		
			
	</body>
</html>

**Pullo** · Feb 18, 2013 15:02

Originally Posted by RakiZtahX

i want to save file in local storage and post it under the table to be able to see it.. how can i do that?

Could you elaborate a little more on what you mean by this.
You have a "save" button and a "load" button and it is clear what these should do.
But when do you want to load the saved data?
Do you want to add a "load" button, or do you want to do it on page load?

**RakiZtahX** · Feb 18, 2013 18:03

oh.. if i click the "save" button it will create a new table containing the information asked in the form just below the table form... and the load will be onload...

**Pullo** · Feb 19, 2013 02:28

Ok, so there are a few things you could do here to improve your code:

It is good practise to move your JavaScript to the bottom of your page before the closing <body> tag. That way any elements it references should have loaded before it does.
<script type="text.javascript"> should be <script type="text/javascript">
You don't need two forms.
You really shouldn't use tables for layout purposes (well done for taking on board the suggestion with labels however).
Inline event handlers are not a best practise. You should try and avoid them by (for example) giving your form and the buttons unique ids, then writing something like f.saveButton.onclick = save;

So, here's the code:

Code:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Offline App(Traffic Enforcement)</title>
    <style>
      label{ display: inline-block; width: 100px; text-align:right; margin-right:5px;}
      input[type=button]{ display: inline-block; margin-top: 15px;}
    </style>
  </head>
  
  <body>
    <header>
      <h1>Add Violations</h1>
    </header>
    
    <div id="vioForm">
      <form id="myForm">
        <div id="lDate">
          <label>Date:</label>
          <input id="vioDate" type="date" name="textDate" value="2011-01-13"/>
        </div>
        
        <div id="lPlate">
          <label>Plate #:</label>
          <input id="vioPlate" type="text" name="textPlate" />
        </div>
        
        <div id="lName">
          <label>Driver's Name:</label>
          <input id="vioName" type="text" name="textName" />
        </div>
        
        <div id="lAddress">
          <label>Address:</label>
          <input id="vioAddress" type="text" name="textAddress"/>
        </div>
        
        <div id="lViolation">
          <label>Violation:</label>
          <select id="combo">
            <option value="0">Moving Violation</option>
            <option value="1">Parking Violation</option>
          </select>
        </div>
        
        <input type="button" id="saveButton" value="SAVE" />
        <input type="button" id="closeButton" value="CLOSE" />
      </form>
    </div>
    
    <ul id="list"></ul> 
      
    <script type="text/javascript">
      function supports_html5_storage() {
        try {
          return 'localStorage' in window && window['localStorage'] !== null;
        } catch (e) {
          return false;
        }
      }    
    
      function saveData() {
        try {
          localStorage["lDate"] = f.textDate.value;
          localStorage["lPlate"] = f.textPlate.value;
          localStorage["lName"] = f.textName.value;
          localStorage["lAddress"] = f.textAddress.value;
          localStorage["lViolation"] = f.combo.options[f.combo.selectedIndex].value;
        } catch (e) {
          alert("Could not save data");
        }
      }  
        
      function displayUserData(){
        list.innerHTML = "";
        frag = document.createDocumentFragment();
        for (i=0; i<formDivs.length; i++){
          key = formDivs[i].id;
          value = (localStorage[key] == '')? "n/a" : localStorage[key];
          li = document.createElement("li");
          li.innerHTML = value;
          frag.appendChild(li);
        }                                       
        list.appendChild(frag);
      }
      
      function loadUserData() {
        for (i=0; i<formDivs.length; i++){
          key = formDivs[i].id;
          value = localStorage[key];
          input = formDivs[i].getElementsByTagName('input')[0];
          if (typeof input === 'undefined'){
            f.combo.selectedIndex = value;
          } else {
            input.value = value;
          }
        }                                       
      }
      
      var list = document.getElementById("list")
      var f = document.getElementById("myForm");
      var formDivs = f.getElementsByTagName("div");
      
      f.saveButton.onclick = function(){
        if (supports_html5_storage) {
          saveData(); 
          displayUserData();
        } else {
          alert("Your browser doesn't support this feature");
        }
      }
      
      f.closeButton.onclick = function(){window.close()}
      
      window.onload = function(){
        console.log("here");
        if (supports_html5_storage) {
          loadUserData();
        }
      }
    </script>
  </body>
</html>

Hopefully what I have done is understandable.
Let me know if you have any questions.

**RakiZtahX** · Feb 19, 2013 02:59

this is very hard..hehe but i'll do my best to learn it.. is there any possible way to save the output to an notepad(.txt)??

**Pullo** · Feb 19, 2013 03:01

Originally Posted by RakiZtahX

is there any possible way to save the output to an notepad(.txt)??

Not that I know of. JavaScript has very limited access to the file system.

**RakiZtahX** · Feb 19, 2013 03:06

and is there a way to show the saved output if i refreshed the page? for example.. if i press f5 the output is still there...

**Pullo** · Feb 19, 2013 03:08

Sorry, I don't understand. Show it where?

**RakiZtahX** · Feb 19, 2013 03:13

so there's no way to save the output in an existing .txt (notepad)? nevermind the second question. hehe. how about if i want to add new local storage.. like new set of output? how can i do that?

**Pullo** · Feb 19, 2013 03:17

Originally Posted by RakiZtahX

so there's no way to save the output in an existing .txt (notepad)?

Not that I know of.
If you search Google, you find a few discussions on this subject with a few clever workarounds.
http://www.google.com/search?q=javas...rite+text+file
Definitely nothing simple, though.

Originally Posted by RakiZtahX

how about if i want to add new local storage.. like new set of output? how can i do that?

As you stated, it's quite a complicated subject (depending on your current JavaScript knowledge).
I would recommend reading up on it first.
This is an excellent reference: http://diveintohtml5.info/storage.html

**RakiZtahX** · Feb 19, 2013 03:25

oh.. ok.. thankz a lot..

**Pullo** · Feb 19, 2013 03:26

No probs

If you have any specific questions, just post back here.

User Tag List

Thread: how to save in local storage? (html 5 new features)

Thread Tools

Display

how to save in local storage? (html 5 new features)

Bookmarks

Bookmarks

Posting Permissions