• Overview
  • Transcript

3.3 Store Data

Apps need to store data, and Windows 10 gives us several options. In this lesson, you'll learn how to store roaming (account) data using key/value pairs.

3.3 Store Data

There are many options when it comes to storing data for our application. There is local storage, which is local to the individual device. So if a user installs our application on their device and we store our data in local storage, then that data is there on that device. It persists between updates, and it's even backed up to the cloud. But there's also something called roaming data, this is data that persists between all the devices for that user. So if they install our app on their tablet, on their phone, and even on another PC, then those settings would persist between all of those devices. And then there's temporary storage. Storage that's, well, it's temporary. It's there at the discretion of the system, and the system can delete it at really any time that it wants to. So obviously, there are times when you want to use local storage, there's also times when you want to use roaming storage. And in our case, we want to use roaming storage, because that makes more sense. If somebody installs our application on their phone or tablet or PC, then we want the feed that they want to read to persist between all of those devices. And we can also store our data in files on the file system. Or we can also store it within a key-value pair type of storage, something like local storage in the browser. So in our case, we don't really need anything sophisticated, we just need a key-value pair storage, and we want it to be shared across all devices. So let's start by creating a file called data.js Inside of our JS folder, the main JS folder. And let's start off with our immediately invoked function, so that our code is going to be protected. And we are going to write a class. Now, we can write a class in a variety of different ways. We can use WinJS. We can use the old style of a constructor function and then set the prototype and all of that stuff. Or we can just use class. Because we can use ECMAScript 2015 here. So class Data, let's have a constructor, which isn't going to accept anything, because we already have all of the information that we need. We want an easy way of getting to the data for our application. So in order to access our storage, we don't use WinJS. WinJS is a JavaScript library. Instead, we are accessing the system API. We are directly going to Windows.Storage.ApplicationData.current. Now, .current is important, that is our application's. So we are accessing the app data for our application. And then from here, we can choose to either store it locally, so if we say, dot, you can see that we have several local options. We have a cache folder. We have the local folder, so if we wanted to store things on the file system, we could do that. Or local settings, that is the key-value pair storage. But we want roaming, so if we say current.roaming, we have roamingFolder, roamingSettings, roamingStorageQuota. Now, this is a lot to type, so we can create a shortcut variable, kind of like what we did with the navigator, we can say var appData = Windows.Storage.ApplicationData.current. And that will give us the ability to say just appData, and then roamingSettings. Cuz that's what we want, the roamingSettings is the key-value pair type of storage, and it is shared between all devices. So let's set a property for this class. Let's say this.settings = appData.roamingSettings. That'll give us a quick and easy way to get to the data that we need. Now let's have a couple of other properties, one that gives us the actual value that we want, that is, our feed URL, and then one that will tell us whether or not we have a feed assigned. So let's start with the actual value. So let's have a getter, let's just call it feedUrl. And we will return this.settings. Now, in order to access our key values, we use .values, and then whatever key that we have specified. So here let's say that it is feed-url, that's the data that we want. Now if this does not exist right now, then the value is going to be null or undefined. I don't know what it is, it's falsy. And that is important. Because for our property, that's going to tell us if we have a feed or not. Let's just go ahead and write that now. We'll say hasFeed. And we only need a getter for this property, cuz there's no reason to have a setter. We'll say var value = this.feedUrl, and then we will return, if we have a value, then of course we return true, otherwise we return false. So we have the getter for feedUrl, now we just need the setter. So we'll have feedUrl, we'll call our parameter value. And we just do this, we say this.settings, so if we wanted to do this the long way, we would say Windows.Storage.ApplicationData.current.r- oamingSettings.values, and then our key, feed-url, and then we would set that to value. But that's a lot to type, especially since we used the settings property quite a few times. So we have our data class, which is going to give us easy access to the data that we want. Now let's write a namespace, because right now, our data class is private, we want to make at least an object created from this class accessible. So let's say WinJS.Namespace, and define, let's call this Data. And then we will have a property which we can say is feed, and we'll just go ahead and create a new Data object. So this is going to be accessible throughout our application. We'll say data.feed, and then feedUrl for the feed URL, and then hasFeed to determine if we have a feed. So we need to go to our default.html, and we need to add that JavaScript file here. So let's do that before default.js. So we will have script src js, and then our data.js. And let's go to the default.js file, because whenever our application starts, we told it to go to the homepage in the previous lesson. Wouldn't it be nice that if we don't have a feed URL, that it will automatically take us to the subscription page so that we could add whatever feed that we wanted to read there and then that would take us home. So now that we have our data we could say, if (Data.feed.hasFeed), then we will go ahead and go to the home page, because we know what feed that we want and then we can go out and get that feed. But if we don't, then we want to go to the subscription page so that we can fill out whatever feed that we want. So we will navigate to Application.navigator.subscriptions, and then we will test that out and hopefully everything will work as it should. And then we will add the form to our subscriptions page so that we can actually save that data. So we are firing it up, and we are going to the subscriptions page. So that at least works. So now we want to go to our subscriptions page. We are done with default.js, so we can close that. And really, we're done with default.html, so we will close that as well. And, well, we're done with data. So we'll close everything. We'll open up subscriptions.html. Let's go ahead and let's create a new JavaScript file called subscriptions.js. And this is a file that we want to reference here within our subscriptions.html file. So let's go ahead and do that, script src subscriptions.js. And then we have that all set up. Let's go ahead and create our form. So let's say Feed, or let's put this inside of a p element, Feed URL, and then we will have an input element, let's give it a type of text, set the id equal to feed-url, and really that's all that we need for that. Now we just need a button, let's give it an id of save-button, and the text is going to be Save. So we have our form, now we just need to do something whenever we enter data into the text box, and then save. So we will go to our subscriptions.js file. Once again, let's have our immediately invoked function. And then we are going to create a page control. So far we've used a variety of controls, split views, split view command, we've used the page control navigation. Why then do we have a page control? What benefit do we get? Well, first of all, it integrates very well with the navigation system. So that in and of itself is a good reason to use and create a page control. But it also gives us the ability to create a control object programmatically. So if we wanted to create a subscriptions control by calling it a constructor, we could do that. We're not going to, but that is one of the options. So to create a page control, it's a lot like creating a namespace or a class, if you choose to use WinJS to do that. We start with WinJS.UI.Pages, and then define. The first argument that we pass is the URL for this page control. Now, we have that. We have Application.navigator. Is it navigator or navigation? That's easy enough to find out. It is right there. So let's just copy this. We already have it typed out. There's no reason for us to type it again, because if we type it again, then we could make a mistake. So since we already have it as far as this property, then we might as well use it. Now, the second argument that we pass to this define function are the members for this control. Now, there are already some members that we can essentially override. Like, for example, there is a property called ready. Well, it's actually a method, but this is going to execute whenever the page is ready. So whenever the entire page is rendered and everything is ready for us to access within the DOM, then this executes. If there is an error that happens, there is an error method that we could write, and that would execute whenever there's an error. But we can also add our own properties and methods as we need to, because this is our own custom control. But for our purposes, really all we want is the ready function. Because when ever this executes, that means that we can then access the DOM. We can get our text box as well as our save-button. So let's go ahead and let's get the save-button first, and we are going to listen for the click event. So we'll say document.getElementById, we'll have the save-button, and then addEventListener, we want to listen for the click event, and then we have our function. And then inside of this function, basically we just want to get the value of the feed URL and store that within our data. So let's say var value = document.getElementById, value, and then we will say Data.feed. I already forgot what that was. Let's look in default.js. Data.feed and then feedUrl. So we will say Data.feed.feedUrl = value. Now, one of the things we could do is, we could initialize some properties that access these elements. So for example, we could come up here and we could have a property that is _feedurl, we could initialize that as null, because whenever this executes, we won't be able to access that element, but inside of the ready method, we could say this.feedUrl = and then document.getElementById and all of that stuff. But I'm going to keep things simple and we'll just use this code here. So everything should be fine, right? I think so. So let's run this, and we will see what happens. So we automatically go to our subscriptions page. This doesn't have to be a URL right now, because we're not doing anything with it. So let's just type test. We will save, and then we will go home. We can back to the subscriptions page. And, uh-oh, we lost our value here. So we need to go back to our ready method. And it's great that we're setting up this event handler, but we also need to fill out that text box. So this would be a good time to actually store this as a property, so let's just do that again, let's say _feedUrl, we'll initialize that as null. Then inside of the ready method, we'll say this._feedUrl equals that, so that then we can say Data.feed and then hasFeed, then we want to say this._feedUrl.value = Data.feed.feedUrl. And then we will set up the event handler, and everything else should be fine. Although, in this case, we'll say var that equals this, although what you will find in some other examples, there will be a page property that will be null, and then in the ready, or in the, there's another method that we could handle called init, then they would set page = this, so that's inside of this event handler. We could say page._feedUrl.value, and just like that. So let's run this now. We should go to the homepage, because now we have a value for our feed, and that's exactly what's happened here. So if we go to our subscriptions, we see that, hey, we have test. We can clear that out, we can save, we can close our application, and whenever we go back, it's going to take us back to the subscriptions page, so there we go. We can say test, save, we go home, we go back to subscriptions, and we have that value. So, we are now saving our data. The next thing that we need to do, is actually do something with that data. And that is go out, retrieve the feed, so that we can then display that within our homepage, the news HTML.

Back to the top