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.

Solution 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

Solution 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.

Comments

[Richard Neil Ilagan]

... or this. Make sure your browser supports it first though.

[Richard Neil Ilagan]

or what @viyancs suggests below.

[ssss05]

@viyancs : hey something here going as wrong..its not storing the value to "text". if i give alert(text) its printing null(empty) only. if we have to use some reset and some other functionalities means it'll go wrong i think.

[viyancs]

yes because var text is not have value, you can defined with variable text = localStorage.getItem("text"); and alert(text); that is will be return value like you're set value in localStorage.setItem("text",$(this).val());

[viyancs]

you must read documentation of local storage, that will be save in your browser, so you can call that in another tab,url on your browser, with notes you don't delete localstorage...:)

[ssss05]

@viyancs : ok got it..actually what happening here as whenever i clicked a button it'll store into text.isn't it? i have a button as reset. if i click on that the value of reset button is storing on that? how to avoid this?