storage

index.html
--------------------------------
<!doctype html>
<html>
        <head>
                <meta charset="utf-8" />
                <script src="javascript.js"></script>

                <title>Our Form</title>
        </head>

        <body>

                <h1>Welcome to our fun form</h1>

                <fieldset style="width:300px;">
                        <legend>Our Form</legend>
                        <form action="" method="" onsubmit="return submitForm();">

                                <label for="name">Name</label>
                                <input type="text" id="name" name="name" placeholder="name"/>
                                <br/>
                                <label for="hobbies">Hobby</label><br/>
                                <textarea id="hobbies" name="hobbies" rows="6" cols="16" placeholder="about your hobby"></textarea>
                                <dl>
                                        <dh><label>Favorite food</label></dh>
                                        <dd><input type="radio" name="food" value="Pizza" />Pizza</dd>
                                        <dd><input type="radio" name="food" value="Hamburger" />Hamburger</dd>
                                        <dd><input type="radio" name="food" value="Lasagne" />Lasagne</dd>
                                </dl>
                                <label>get updates:</label>
                                <ul style="list-style-type:none;">
                                    <li><input type="checkbox" name="updateFood" value="updateFood" />get updates for similar food</li>
                                    <li><input type="checkbox" name="updateHobbies" value="updateHobbies" />get updates your hobby</li>
                                </ul>
                                <label for="destinations">Please choose a destination to visit</label>
                                <select id="destinations" name="destination">
                                        <option value="nil">---------</option>
                                        <option value="ny">NY</option>
                                        <option value="miami">Miami</option>
                                        <option value="la">LA</option>
                                </select>
                                <br/>
                                <label for="birthday">Enter your birthday</label>
                                <input type="date" id="birthday" name="birthday" />
                                <br/>
                                <label for="theFile">upload a file</label>
                                <input type="file" name="theFile" id="theFile"/>
                                <input type="submit" value="send">&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="reset">


                        </from>

                </fieldset>

        </body>
</html>

-----------------------------------------------

javascript.js
-----------------------------------------------------------

var USER_KEY = "userkey";
var FOOD_KEY = "foodkey";


function submitForm(){

    var name = document.getElementById("name").value;
    var food = document.getElementsByName("food");

    for(var i=0; i<food.length; i+=1){
        if(food[i].checked){
            storeFavFood(food[i].value);
            break;
        }
    }


    storeUsername(name);

    if(name==""){
        return false;
    }
    else{
        return true;
    }
}

function storeUsername(username){
    sessionStorage.setItem(USER_KEY,username); // saving to the session storage - will be deleted once the browser is close
    //localStorage.setItem(USER_KEY,username); // saving to local storage - remains even after the browser is closed
}

function pullUsername(){
    return sessionStorage.getItem(USER_KEY); // getting the value saved in session storage
    //return localStorage.getItem(USER_KEY); // getting the value saved in local storage
}

function storeFavFood(food){
    sessionStorage.setItem(FOOD_KEY,food);
}

function pullFavFood(){
    return sessionStorage.getItem(FOOD_KEY);
}

---------------------------------------------------------------------