 Hello everyone, my name is Raj and I am the manager of Microsoft. So in this session I am going to be taking our, you know, what are all the most common strategies that we are going to do today? So, what do we mean by client-side storage? So, frequently under the applications, you know, we keep running into situations where we want to store bits of data of the client and, you know, we want to use that for whatever reason, right? So, this session is about what are all these strategies, what are the techniques and technologies that we are going to be able to provide that allows us to do this in the modern way. So, the focus is on what's available in the modern way, right? So, that sort of is what we look at. You know, why is this important? Why should we care about client-side storage? Then we start reviewing some of the options, cookies, downstairs and the next few weeks. We try to spend a little bit of time about compatibility. It's always a concern. We talk about security and intuitive and we close out with some questions. So, why should we talk about, you know, client-side storage? Why is this important? You know, connectivity is getting better and better, right? It's like if you pretty much live in cities and if you don't travel a whole lot, it's actually possible today to be continuously connected all through your 24 hours, right? Well, that's great. But still, you know, we haven't got to a point where it's not a concerning work. It's connected user experiences on the web. It's still something that's, that's something that you're going to keep in mind, right? Especially on mobile compactors or, you know, on laptops or on phones. There are many situations where you don't have an activity. And as a web developer, what does that mean, right? So, does that mean that our apps become completely inaccessible at those points? So, those scenarios are becoming more and more important. There are places where you have internal connectivity and then you want your actual usable device to have some connectivity. You know, caching of information is important. For instance, you know, there are various kinds of caching, right? But how about caching data itself? So, your application is, you know, maybe you're making an Ajax request and you're fetching some data from the server and then you want to do something with that, right? Now, what if we could have that data persist and then use that, you know, for the next time, even when there's no caching? In fact, you know, I think G-Way kind of did this in a very nice way with the Google peers thing plug-in that we used to have where your email could be available offline. So, even if you didn't have connectivity, you could still, you know, check your email. Like, you can go to web.google.com and then you can go to gmail.com and it still works. So, that kind of scenario, right? Your app is basically a web app, but you wanted to, you know, work provide a reasonable user experience when you're in there is no connectivity. So, there is a HTML5 specification called offline web applications. So, there's a sketch called offline web applications, which will give you, you know, confidence on the, you know, all the stuff that we're going to look at today. You might have heard of it as app cache. So, the basic idea is if you have a web app and you know, you have all your resources, right? You have your CSS, JS, your HTML markup. AppCache is a spec that allows browsers to take their cache offline. So, basically, you can visit the site even when you don't have connectivity. You can actually open a browser and go to example.com and the site will still load even if there's no connectivity. Do we have a question? Just a small clarification. Yeah. The offline web application that you have for the app is part of the actual version of Python. Correct. It's not a part of the actual Python. Correct. It is. It is part of the... I mean, yeah, HTML5 itself is a marketing interval. W3C does not version HTML anymore. So, HTML is... Oh, that's the word for it. Sorry? That's the word for it. It's the word for it. It's the word for it. They say the application is... I think section 6 is the word for it. Oh, so you're saying it's part of the main spec. Yeah. Okay. So, you know, they've all these different things that you've got for the app. So, you can actually delete, it complements that very nicely. And then, of course, for Windows 8, if you're building desktop applications with HTML5 services in JavaScript, then, you know, these things are, you know, probably... because your app itself will run whether you have connected with your app. So, with that, I think we want to cover what we all know about cookies. That's been traditionally the, you know, the technology of choice we want to do persistent storage on the client. The nice thing about cookies, of course, it works pretty much as you had. So, it's been around for a long time. It works on the desktop. There are storage-sized limitations with cookies. So, you can store, you know, up to 4K of information on the QnA persisted to store 4K information on the client. Cookies get transmitted to their single request. So, you know, if you are, for every request that HGP requests that is a server, the cookies that I can create from the client get transferred up and down. And this goes even for stuff like CSS and image files and so on, right? So, even on a CSS5K request, it goes up and it's back up. And there's not much of a programming model at all. So, all you can do is store bits of string inside your cookies. So, if you want to have some structure in your data, then it's pretty much up to you, right? So, you have to take your data and do, you know, power-separated format or, you know, you want to have your own format or you want to do JSON serialization. Whatever the case is for XML, so you can do whatever the thing is, but ultimately the cookie just stores a string and you have to do the parsing, cracking and whatnot. But it works, right? It works. And there are, for example, there's a jQuery plugin that, you know, that really helps you deal with cookies in a very nice way. It provides a nicer programming API for the cookies. So, that's something that we know. With HTML5, you know, one of the things that brings to the instance of that text is something called as down storage. So, down storage is a HTML5 spec that provides simple persistent key-rally storage on your mind, right? So, the API wouldn't get any simpler. So, we can look at a brief demo. So, it's simply an object on a window object, right? So, you can simply say window.sessionStorage.of key equals value, right? You can fetch the data also like that. So, there are two types of storage. There is session storage and local storage. So, these are equivalent to session cookies and personal cookies. So, session storage is basically an object, like whatever you put into it in that session across pages, right? So, if you, in a particular browser session, if you are on page A, you put some data there and you navigate to page B, you can get the data tag. So, throughout that session, the data is persistent. Local storage is the counterpart where the information gets persistent across sessions. So, the API is exactly the same and there are different objects in the API system. Whatever you put in local storage gets persistent on the file system itself, right? So, you know, after a system boot or you close the browser, open browser, the data in local storage is going to get persistent. Yeah. Yeah. Is what, sorry? It's called Web Storage. It's called Web Storage. Same thing. Everything is the same. So, you know, that's what this does. And some of the other aspects of this kind of API is that this is scoped by domain. You know, so whatever you store in session in local storage is available in that domain. So, you know, what that means is example.com says local storage of P equals value. Hacker.com cannot get that value from your local storage. So, this is supported on IE from version 8 onwards. As opposed to cookies, you can store lots of data here. So, Chrome and Firefox allow up to 5 megabytes or 10 MP of data. One KVI with DOM storage and session storage is that you cannot iterate over it in the sense that you have to know what you've stored. Right? So, if you have stored 5 languages, you can get those 5 languages back. You cannot say, you know, get all the languages that have been stored in my DOM storage. You can't iterate over that. Otherwise, you know, this is a pretty nice solution. Yeah. Sorry? It's the 5.0. The question is, is the 5 MP and 10 MP limit is it per domain? Yes, it is per domain. It's by all means. It's by all means. So, you know, maybe let me just show you what the APN looks like. It's not much at all. So, this is a little console that I use to quickly test out small pieces of script. For instance, let's say I want to store some piece of data in my session storage. You know, then I can do something like this. I can say... Alright. So, I can do something like, you know, window.sessions storage or, you know, some key equals some value. Right? So, that's all. That's what APN looks like. It's not much at all. Right? And as soon as you do that, and I go ahead and hit control enter and I just run the script. Now, what I'll do is obviously I can get that data back. I can say print of I can say print of session storage of cool. And then you should see that data come on the right-hand side there. So, we're able to, you know, store it and retrieve it. So, I'll just go ahead and refresh this page. You know, to simulate a page navigation. And then I'll go and put the control print and you can see that the data is available here still. So, that data was persisted for this particular conversation. Obviously, I close this and open a new tab and do that. Now, I'm running it and you see that there's nothing coming there on the right-hand side. I don't see because it's a completely new session. The other alternative is local storage. So, the only thing that changes is the object. So, I'll probably say local storage of cool equals something. Right? So, and I'll go ahead and run this. So, what we should see is if I completely close the browser. I open a new instance. I go to the same site. I paste that and when I run it, I still get the value. Right? So, here the data is very persisted across all sessions. And this will get clear when you clear the browser cache and so on. Every browser has its own answer. So, you won't clear it again. So, don't rely on that. So, don't make really critical information in your browser. It's broken. It's not there. It's probably a bad idea because the browser is cleared when it's gone. Probably, let me show you a strategy where this thing might make sense in a more real-world case. So, I put together a very simple example here. So, this is basically an ASP.NET site. The server-side stuff doesn't really matter. So, I hit F5. So, basically what I have here is a little form. You can see that I have done this before. How many times have we had cases where, you know, there will be this big complicated form on some site and the user keeps filling it and then, you know, something happens, you know, the system crashes and whatever I entered in that form is gone. Right? And then I have to do the whole process again from the first. Which, of course, is a very poor user experience. Right? So, what if we could, you know, slightly enhance that. So, you know, I fill this form, you know, I fill my address, I'm filling this address. I didn't get to my subject button. So, which means it didn't go to the server. Now, I hit the page again and, you know, the user would just be delighted to see that the data is not gone. Right? So, in this case, all the information I entered is still in there. Right? So, this was not stored in the server because I never did submit. So, what exactly happened here? So, I used DOM storage to implement this. So, the actual code here doesn't matter. So, what happened here? I set a signature and every one second, I call a method name for safe form in my form catch object. And in safe form, what I do is I iterate through a list of form feeds in my form. This can be more convenient. We can just make a simple case. For example, you might use a cs3 selector to select all my text feeds and iterate through that maybe. And here all I do is I get the value and then I call, you know, I have a small API for my DOM storage and local storage. Right? So, essentially what's happening here is every one second, a little piece of script walks through my form and saves everything to DOM storage. And on the page loads, so a load form is getting called the first time. So, that's here, form catch or load form. And here I simply walk through each of these elements and I initialize my forms from that. So, a very simple use case but, you know, something that can really provide a nice UX. So, that very briefly was DOM storage. Yes? You mentioned that all these kinds of storage have a key value. Correct. The value has to be, like, from the long term space, right? Can they be more complex on this? Right. So, the question was so it's a key value storage. Can we store only strings or can we store other kinds of things in the DOM storage? You can store things. So, the same thing applies. So, if you want to store other kinds of objects, you can serialize it yourself. So, for instance if I want to store an object here. So, let's say, you know, I have a person object, right? So, person equals that and name is this. So, this is a, you know, it's not a regular string, right? And I want to store this in DOM storage so I can say local storage of . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .