I am trying to get 2 buttons to work. One should save my local storage and the other should read my local storage. For some reason they still aren't working. I did have the alert working, but now that doesn't work. For reading the local storage I would like to use the jQuery append() method. Any thoughts on what I'm missing.

script

$(document).ready(function() {


   function saveLocal(){
if (window.localStorage) {
    localStorage.setItem("firstname","myfirstname");
    localStorage.setItem("lastname","mylastname");
    localStorage.setItem("state","mystate");
    alert("The data has been saved locally.");
} else {
    alert("Your Browser does not support LocalStorage.");
}
            }

     function readLocal(){
if (window.localStorage) {
    var firstname = localStorage.getItem("myfirstname");
    var lastname = localStorage.getItem("mylastname");
    var coursetitle = localStorage.getItem("mystate");

     $("#message").empty().append( firstname + " " + lastname + "  "  +  state                     );
}else {
    alert("Your Browser does not support LocalStorage.");
}
         }


      }); // end ready

html

       </div>
       </p>
       <p>

   <div id="main">
<input type="button" value="Save Values" onclick="saveLocal()"/>
<input type="button" value="Read Values" onclick="readLocal()"/>
        </div>

I am trying to get 2 buttons to work. One should save my local storage and the other should read my local storage. For some reason they still aren't working. I did have the alert working, but now that doesn't work. For reading the local storage I would like to use the jQuery append() method. Any thoughts on what I'm missing.

script

$(document).ready(function() {


   function saveLocal(){
if (window.localStorage) {
    localStorage.setItem("firstname","myfirstname");
    localStorage.setItem("lastname","mylastname");
    localStorage.setItem("state","mystate");
    alert("The data has been saved locally.");
} else {
    alert("Your Browser does not support LocalStorage.");
}
            }

     function readLocal(){
if (window.localStorage) {
    var firstname = localStorage.getItem("myfirstname");
    var lastname = localStorage.getItem("mylastname");
    var coursetitle = localStorage.getItem("mystate");

     $("#message").empty().append( firstname + " " + lastname + "  "  +  state                     );
}else {
    alert("Your Browser does not support LocalStorage.");
}
         }


      }); // end ready

html

       </div>
       </p>
       <p>

   <div id="main">
<input type="button" value="Save Values" onclick="saveLocal()"/>
<input type="button" value="Read Values" onclick="readLocal()"/>
        </div>

• javascript
• jquery
• html
• button

2 Answers 2

Don't define the functions inside the $(document).ready() handler. The names are only accessible inside that function's scope, so they can't be used in inline handlers, which look up the names in the global scope.

The only thing that should be inside that handler are direct actions that need to take place after the document is loaded. Function definitions do not need to be delayed like that.

Alternatively, instead of using onclick attributes in the HTML, you can use jQuery binding:

$("#savebutton").click(savelocal);
$("#readbutton").click(readlocal);

remove the document ready theres no need for it. your not asking it to run anything. put the script in the head tag and call it a day