How share data between all .js pages

Question

So I'm workinng on an app, and there is an option page, with 1 option, as is important for (almost) all of the other pages. I do use the navigation app template (pagecontrol).

The problem is just, I don't know how to save the data into my other .js pages. Right now is it just stored in a variable, but that doesn't work of course.

When I know how to save the data global, would I like to know to to store them as local data.

Answer 1

this may be helpful for you

http://msdn.microsoft.com/en-us/library/windows/apps/br229561.aspx

Answer 2

Any variable or data defined in the "default.js" file, globally or registered through a namespace will be available on all the other pages.

You could also declare the data in an external js file (like "data.js") and include it in the "default.html" file, all the variables, functions and objects declared on that file will be available to all pages.

Answer 3

I tried that about namespace, but it doesn't seem to Work for me. I don't want it to be like a Group just a simple variable like:

// from optionPage:
var option = "metric";

// on all other pages:
if (option === "metric") {
    ...
}
else {...}


Just like that. I don't know if I can use WinJS.Namespace.define("option") or something?

Answer 4

Hi Potices,

As Ealsur suggests, it's reasonable to use WinJS.Namespace.define to expose some global variables in your windows store javascript apps. It is not simply grouping the variables, but let you use a consistent means to define global data variables. And if you open those predefined .js files, you can find that they all begin with an anonymous function like:

(function(){
})();

this helps make sure that the code (variables and functiosn) in each .js files do not pollute the global namespace, and we use WinJS.Namespace.define to explicit define global variables whenever necessary.

#Organizing your code with WinJS.Namespace (Windows Store apps using JavaScript and HTML) (Windows)
http://msdn.microsoft.com/en-us/library/windows/apps/Hh967793.aspx

For example, if you define some variables in one .js file (reference it in default.html ) like:

WinJS.Namespace.define(
"MyGlobalData",
{
var1: null,
var2: null
}
);

then, you can use the following syntax to reference them in other .js files(used in other pages)

MyGlobalData.var1 = xxxx;
MyGlobalData.var2 = yyyy;

Also, you can also use other data storage like HTML5 localStorage (or session storage) for sharing data, variables bewteen pages or even across app's lifecycle.

#Introduction to Web Storage (Internet Explorer)
http://msdn.microsoft.com/en-us/library/windows/apps/cc197062.aspx

 

---

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 5

I really think it's helpful, but I'm still a Little bit confused. I don't know how to refer from my OptPage.js to the default.html ?

Answer 6

Using the Page Control Navigator pattern, any HTML object that you declare on the "default.html" will be available on every loaded page, and you can refer it using any selector (document.getElementById for example).

Answer 7

Just add to what Ealsur explained,

For Windows Store app built with html5+javascript, whenever you reference one or more .js files in a .html page loaded in the app (such as the default.html which is loaded at the begining), then the functions and variables defined in the script files will be kept in memory during the app's lifecycle (even if you navigate to other .html page via navigation framework). That's why the variables you expose via "WinJS.Namespace.define"(in a certain .js file referenced in default.html page) can be used in other .js files (refefenced in other .html pages which are loaded later in app's workflow).

---

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 8

There is still a problem... metric.on is not definated...

So what I did:

In default.html (in the body) added:

<div id="divOption"></div>

in OptPage.js added:

WinJS.Namespace.define(
                "metric",
                {
                    on: true
                }
            );
            document.getElementById("divOption") = metric.on;

In bmi.js added:

document.getElementById("bmiOutput").innerText = metric.on;

Answer 9

I don't think that:

document.getElementById("divOption") = metric.on;

Will work, you are asigning a boolean value to an HTML object, maybe you wanted to do:

document.getElementById("divOption").innerHTML = metric.on;

metric.on should work if the define is called somewhere before the use of the value, at least in the tests I made worked, can you provide a bigger code snippet? Maybe we can find the problem there.

Answer 10

Yea, of course. Here is a big part of the code (on the important pages, for this topic)

default.html (appbar, with the possibility to go to the OptPage (option page)):

<body>
    <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/home/home.html'}"></div>
    <div id="appbar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'bottom'}" >
        <hr 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{type:'separator',section:'global'}" />
        <button data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'OptButton',label:'Options',icon:'home',section:'global', 
            tooltip:'Change your input method', type: 'button'}">
        </button>
    </div> 
    <div id="divOption"></div>
</body>

OptPage.js:

... //before this, the connection between the button and eventhandler. 
buttonClickHandler: function () {
            var inMe = document.getElementById("inMe");
            var selection = inMe.options[inMe.selectedIndex].value;
            var opt;
            var update = "Updated!"
            document.getElementById("sumbitOutput").innerText = update;
            WinJS.Namespace.define(
                "metric",
                {
                    on: true
                }
            );
            document.getElementById("divOption").innerHTML = metric.on;
        },

home.html (used to navigate to bmi.html):

<div id="div0" onclick="javascript:WinJS.Navigation.navigate('/pages/bmi/bmi.html')"> <div id="div01"><img src="/images/hand.jpg" border="0" alt=""></div>

bmi.html:

<div id="divWeightInput"></div>What's your weight? (in kg)<input id="weightInput" type="text" /><br /><br />
                    <div id="divheightInput"></div>What's your height? (in cm)<input id="heightInput" type="text" /> <br /><br />
                    <button id="bmiButton" >Calculate it!</button><br /><br />
                    <div id="bmiOutput"></div>

bmi.js:

buttonClickHandler: function () {
            var bmiOut = 0;
            var weight = document.getElementById("weightInput").value * 1;
            var heightIn = document.getElementById("heightInput").value / 100;
            var height = heightIn * heightIn;
            var bmi = weight / height;
            bmiOut = "Your BMI is " + bmi + "."
            if (bmiOut === "Your BMI is " + NaN + ".") {
                bmiOut = "Your BMI couldn't be calculated. Makes sure you use . (dot) and not , (comma)."
            }
            document.getElementById("bmiOutput").innerText = bmiOut;
            //under this text, is just for testing the problem
            document.getElementById("bmiOutput").innerText = metric.on;

 

Answer 11

I created a new proyect and did exactly what you did and the bmiOutput div ended up with a word "true" inside.

The only thing I can think of is that you are navigating away from the page (via the click handler of "div0") before the buttonClickHandler is fired, hence, the metric.on value is never set.

I would declare the metric variable on the initialization of the App, maybe on the "activated" handler of "default.js" and put its value on "false", then if the user fires the buttonClickHandler through the App bar, just change the value of "metric.on" to true.

Answer 12

Thank you very much for your help (and also Steven Cheng), it's now working! I did what you said and it's not returning 'false' and 'true' . Again, I'm very happy for the help.