CODEWITHSUNDEEP
javascriptjqueryhtml
Detective merry
Detective merry

Reputation: 394

Javascript, how to transfer variable value to next page using GET?

I am using Javascript and Jquery to code for a mobile app for my school assignment. I am trying to transfer the value of variable days to another page by using the get function, the codes below are the things I've done so far. What I am trying to do here is to assign the variable an id on result.html so that i can call it on schedule.html. However, the variable value is not appearing in schedule.html when 'write.document-ed', with the result instead being [Object object].

result.html

<html>
var days = (weight/0.064); 
var days= document.getElementById('myday').value;
</html>

schedule.html

<html>
var days;
var days = document.getElementById('myday').value;
write.document(day);
</html>

The project has 4 files, three htmls and one js file. First html file, index.html, receives inputs from forms and place them in functions and submits to result.html. Common.js is shared with all the html files, to put in all the different formulas and functions in.

I am aware how to transfer variables inside common.js into the pages, as I did with index.html to result.html using forms, using this method:

index.html

 function bigfunction(){
    var weight = 
    smallfunction(parseFloat(document.form.Weight.value));
    document.form.weight.value = weight;
    document.form.submit()

Common.js

smallerfunction(weight){
var weight = weight;
}

result.html

<script>
var weight;
 weight = decodeURIComponent(getUrlVars()["weight"]);
</script>

Weight = <script>document.write(weight)</script>

However, I do not think I can use the same thing I did above to transfer variable value from result.html to schedule.html, as there is no forms on result.html to submit to next page. I have Jquery and all the software installed nicely, I think I heard something about using DOM to do this, but I am not sure how.. I think I would prefer an answer using get like I did in the first two code examples and DOM but as long as it works I am all ears!!!!

Answer: localstorage

result.html

var days = localStorage.setItem("days", days);

schedule.html

var days;
days = localStorage.getItem("days");
days: document.write(days)

thank you alll !!!!!!!!!!!!!!!!!!!!!!!!!!

Upvotes: 4

Views: 1641

Answers (2)

Markus
Markus

Reputation: 1114

There are more than just two ways, but I would recommend the second one here:

The more persistent way (data stays even if the browser gets closed), is shared between tabs (browser scope): 

// setter
localStorage.setItem("data", { date: 'whatever', anotherKey: 'somevalue' });
// getter
var data = localStorage.getItem("data");

Or, what I would prefer for non-persistent data, sessionStorage (stays until the browser/tab gets closed), not shared between tabs (tab scope)

// setter
sessionStorage.setItem("data", { date: 'whatever', anotherKey: 'somevalue' });
// getter
var data = sessionStorage.getItem("data");

Be aware that using localStorage might lead to unwanted behavior if some data stays there and will be presented the user again if he comes back some days/weeks later.

Upvotes: 2

Detective merry
Detective merry

Reputation: 394

Answer: localstorage

result.html

var days = localStorage.setItem("days", days);

schedule.html

var days;
days = localStorage.getItem("days");
days: document.write(days)

Upvotes: 0

Related Questions