Tantárgy:Webes rendszerek kliens oldali programozása 2. [IM3314, WP3316]
Tananyag:HTML5 - Új API-k
Feladat:Készülék tulajdonosa

Megoldás forráskódja

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Készülék tulajdonosa</title>
      <meta name="author" content="Tóth Péter" />
      <meta name="copyright" content="© 2012, NYME SEK" />
      <meta http-equiv="date" content="2012-10-12" />
      <meta name="revised" content="Tóth Péter, 12/10/2012" />
      <meta name="description" content="HTML5 - Új API-k - Készülék tulajdonosa" />
      <meta http-equiv="content-language" content="hu" />
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
      <script type="text/javascript">
         <!--
         // OnLoad függvény
         function funcStart(){
            // Lekérdezzük a tárolt tulajdonos nevét
            var sNev=localStorage.getItem("nev");
            // Ellenőrizzük, hogy volt-e értéke a név adatát tároló változónak
            if((sNev!=null)&&(sNev.length<3)){
               // Tájékozató üzenet
               document.getElementById("idUzenet").innerHTML="A készüléknek nincs tulajdonosa!";
               // Gomb felirata
               document.getElementById("idGombMentes").value="Adatok tárolása";
            }else{
               // Tájékozató üzenet
               document.getElementById("idUzenet").innerHTML="A készülék tulajdonosának adatai:";
               // Gomb felirata
               document.getElementById("idGombMentes").value="Adatok módosítása";
               // Űrlapmezők beállítása
               document.getElementById("idNev").value=sNev;
               document.getElementById("idCim").value=localStorage.getItem("cim");
               document.getElementById("idTelefon").value=localStorage.getItem("telefon");
               }
            }
         // Adatok mentése / módosítása
         function funcAdatMentes(){
            // Beállított név mező értékének ellenőrzése
            var sNev=document.getElementById("idNev").value;
            if(sNev.length<3){
               alert("Ön nem megfelelően töltötte ki a 'név' mezőt!");
               return;
               }
            // Beállított cím mező értékének ellenőrzése
            var sCim=document.getElementById("idCim").value;
            if(sCim.length<3){
               alert("Ön nem megfelelően töltötte ki a 'cím' mezőt!");
               return;
               }
            // Adatok mentése
            localStorage.setItem("nev",sNev);
            localStorage.setItem("cim",sCim);
            localStorage.setItem("telefon",document.getElementById("idTelefon").value);
               // Újratöltjük a weboldalt;
            location.reload();
            }
         // Adatok törlése
         function funcAdatTorles(){
            // Adatok törlése
            localStorage.removeItem('nev');
            localStorage.removeItem('cim');
            localStorage.removeItem('telefon');
            // Újratöltjük a weboldalt;
            location.reload();
            }
         -->
      </script>
   </head>
   <body onload="funcStart()">
      <div id="idUzenet"></div>
      <table>
         <tbody>
            <tr><td>Név:</td><td><input id="idNev" type="text" size="50" /></td></tr>
            <tr><td>Cím:</td><td><input id="idCim" type="text" size="50" /></td></tr>
            <tr><td>Telefonszám:</td><td><input id="idTelefon" type="text" size="50" /></td></tr>
         </tbody>
      </table>
      <div>
         <input type="button" id="idGombMentes" onclick="javascript:funcAdatMentes();" />
         <input type="button" onclick="javascript:funcAdatTorles();" value="Adatok törlése" />
      </div>
   </body>
</html>