SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,881
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by RakiZtahX View Post
    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?

  3. #3
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,881
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Ok, so there are a few things you could do here to improve your code:
    1. 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.
    2. <script type="text.javascript"> should be <script type="text/javascript">
    3. You don't need two forms.
    4. You really shouldn't use tables for layout purposes (well done for taking on board the suggestion with labels however).
    5. 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.

  5. #5
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)??

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,881
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by RakiZtahX View Post
    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.

  7. #7
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,881
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Sorry, I don't understand. Show it where?

  9. #9
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,881
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by RakiZtahX View Post
    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.

    Quote Originally Posted by RakiZtahX View Post
    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

  11. #11
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh.. ok.. thankz a lot..

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,881
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    No probs
    If you have any specific questions, just post back here.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •