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

Share Improve this question Follow edited Jun 1, 2013 at 1:55 Isaac 11.8k55 gold badges3535 silver badges4545 bronze badges asked Jun 1, 2013 at 1:46 user2197436user2197436 6511 gold badge22 silver badges99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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