Get value of a variable in another page using jquery

Question

am really struck here. Actually the problem is, i have 2 web pages name as menu.html & index.html. in menu.html i have 3 buttons like "one,two,three", when i click any of a button it'll redirect to index.html. so, i wrote a common.js file for getting value of what button i clicked in menu.html. i have included common.js into both menu.html & index.html.

common.js :

var text=" ";
$(document).ready(function() {
    $('input:button').click(function() {
        text = $(this).val();
        alert(text); //here am getting correct values for a button like 'one,two or three' in menu.html page
        });
}); 

now i need to get the value of "text" in another.js file which is in index.html.

another.js:

$(document).ready(function() {
    alert("text "+text); //here am getting empty value.
});

moreover i included correctly in index.html :

<script src="common.js" type="text/javascript"></script>
<script src="another.js" type="text/javascript"></script>

what am doing wrong here? thank u in advance.

Answer 1

you can use localStorage() function, localstorage will be save your data like cookie, but it's very powefull because localstorage can be save data more big than cookie.

in your case maybe like this

$(document).ready(function() {
    $('input:button').click(function() {
        localStorage.setItem("text",$(this).val());
        });
}); 

and then in another page you just notify with this

$(function(){
 alert("text" + localStorage.getItem("text"));
});

this is for details local storage

Answer 2

Including the same Javascript file in two separate HTML pages will not carry over variable values over to each other. So it doesn't mean that since your common.js is in both files, you can access something modified in one page on the other.

You may want to use cookies, or a query string, or do some server-side code magic instead.