I'm making a Windows 8 Store App using HTML, JavaScript, and CSS. The app allows its user to make lists, and manage the items inside of those lists. I've managed to edit lists and do everything I want, but the problem is that once you close the app, everything is reset, because none of the changes to the DOM I made (such as elements I added or removed) are saved, and I lose all of the lists and their items I made. Is it possible to edit the DOM in such a way that it edits the actual HTML file, so that everything I did is still there once I open the app again? If not, what are some alternate methods for saving user data once the app is closed?
Thanks,
Daniel
This may be late but hope this helps.
You can use HTML local storage.With local storage, web applications can store data locally within the user's browser.
Before HTML5, application data had to be stored in cookies, included in every server request. Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance.
Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.
Local storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.
You can store data by
localStorage.setItem("Name", "Daniel Bezden");
And then you can access them by
localStorage.getItem("Name");
Good luck!
Related
I basically have two questions reguarding local staorage.
If i use localstorage.clear() in my producation application will it wipe out the entire localstorage from the browser. If the local storage had some content from other application.
If i user local storage for my application will the user be able to see or clear it even if the user is not currently using my application.
localStorage.clear() removes everything stored in it, and same goes for sessionStorage, but it's per domain/page, not per browser. This means if 3rd parts script in the same page/domain store stuff in it, you are removing their stuff too.
users can always clear their whole browser cache and affect your local storage data, unless your application runs with its own WebView (phonegap, cordova, native apps). If this is a regular Web App, users can always read content, or even modify it, through devtools.
The TL;DR is that localStorage is not a good storage solution, it's not secure, and it's ultimately not reliable.
Strawberry on top, it's synchronous, hence blocking, and limited in size.
I suggest IndexedDB instead, and yet malicious code could interfere with its data too, and users can read it, so I'd never store passwords in there.
I have a 40-50MB JSON object that I need to persist across to a different page.
This only needs to happen once (one transition) but I'm still way over HTML5 LocalStorage limits, what other options do I have?
Unfortunately, that is too much data to store for most browsers. Even combining sessionStorage and localStorage both will not get us even close.
There are a few options you can try though:
You can store the data on your own server. This will depend on what web server/environment you are using.
You can use someone else's server to store the data. For example, you could use Google Drive's API. This does mean that your user needs a google account. You could also pay for a service like Amazon S3 to store it.
You could create a 'container' page, which loads and displays the pages, but keeps the session going. How exactly this works depends again on your environment.
40-50m is too huge for a browser, the worse part is if mobile is involved, what you can do is split the data into chunks, keep some in sessionStorage, localStorage and the remaining on your server, so that the part on the server will be fast enough to load, You will have to join them once all is loaded and done. I wouldn't recommend this method though.
Team, We have implemented a single page application, where we are storing some data in root scope to access in other pages of an application. Everything works fine in normal flow. We hit the problem on browser refresh. When user in one of our application pages, if user refreshes the page, whole data is lost from root scope. We tried not allowing to refresh. But, we found that it is not possible and not even able add custom message to notify the user. Now, we are just logging out the user whenever he refresh the page, which is an awkward to user and that too our application doesn't need that much security. So, we are thinking to add whole root scope data in local storage on refreshing the page and after reloading the page, we would again load whole data from local/ session storage data to root scope. We have to do this at single place. So, we don't have to implement this at individual module page.
Is there a way to achieve this. Can any one please suggest if have an alternate way.
Be aware that HTML5 Local Storage only has 800kb-10mb depending on the browser. I heard Safari has 99 idk. 5mb in the latest Google Chrome (2/14/17).
Anyway, you can create a local storage by stringifying to JSON:
localStorage.setItem('myDataStorage', JSON.stringify(myData));
Then retrieve them
var myRetrievedData = JSON.parse(localStorage.getItem('myDataStorage'));
myDataStorage is the name of your created localStorage. You can use different names to create multiple localStorages if you would, just be aware that each one is limited only in size. Don't expect to save HD images much less videos using HTML local storage
That being done, your retrieved data can now be manipulated by your code using the variable myRetrievedData (or whatever variable name you want)
I made a webpage (todo app) that uses locale storage for saving the data in json format. I use it on my smartphone (android) so all data is stored locally on my device (ca 200 kB)
Now, I would like to backup the data somehow. I have tried different approaches (email, post form, copy-paste) but none of them has worked so far. Is there an easy straigt foreward way to do this?
You don't have control over the localStorage to that extend. But there are several ways to store data across different storages (e.g. evercookie) even though I would not use that at all (not sure how legal that is, if at all)
But the best way would probably be to backup the data on your server and periodically let your users send their localStorage to you if there were changes.
If the localStorage got wiped, then just ask the server to send back the last stored set of data for that user.
If you are using Cordova/Phonegap you might want to look into http://docs.phonegap.com/en/1.4.1/phonegap_file_file.md.html#FileWriter to create a copy of the localStorage as physical file.
I would like to import data that the user had entered into his profile on a website that I do not control. I don't want the user to hand me his login credentials to grab the data from the server-side (connecting directly to aforementioned website). I would rather prefer the login data to stay on the client's machine: It makes my service more trustworthy and I don't have to process sensitive data.
I thought that this can probably done with javascript without greater hassle. However, given the security risks, it seems to be blocked by browsers. See How to get data with JavaScript from another server?
So I think my question is already answered and can be closed/deleted.
I'm not sure I understand what you're trying to do, but there is no secure way to verify login credentials in a browser client. If you want to check login credentials, you will have to involve a server.
Some data can be stored on the client side, but then a user is tied to a particular browser on a particular computer and can't use the service from anywhere else. In older browsers data is generally limited to what can be stored in a cookie and cookies are not guaranteed to survive for any particular long lasting time frame. In the latest browsers, data can be stored in HTML5 local storage which allows for a little more structured way of storing data, but even then you're still stuck in one particular browser on one particular computer.
Based on your comments, it sounds you're trying to "cache" a copy of the data from web-site A that you can access from client-side code on web-site B on multiple visits to your website. If that's the case, then it sounds like HTML5 local storage may work to serve as a cache storage mechanism. You will have to figure out how to get the data from web-site A into the cache as the cache will be subject to same-origin access (domain X can only access the data that was put into HTML5 local storage by domain X), but if you can get manage to get the data from web-site A into your web-site B client-side page (perhaps using JSONP), then you could cache it using HTML5 local storage. You will need to realize that even HTML5 local storage is not guaranteed forever (so you need to be able to fetch it again from web-site A if required).
You said this
I don't want the user to hand me his login credentials to grab the
data from the server-side (connecting directly to aforementioned
website).
If you do that, anyone would be able to access any User's data, since you don't restrict access to data.
You also said this
I would rather prefer the login data to stay on the client's machine:
It makes my service more trustworthy and I don't have to process
sensitive data.
I'm really not sure that's a good idea. You still need to lock down personal information. But anyway, if you really want to, you can use localstorage -- modern webbrowsers support this.
Check out this link for a primer on local storage.
Storing Objects in HTML5 localStorage
Note that the user can clear the browsers local storage, so you still need to have a form to enter credentials.
EDIT -- if you want to save a user's profile information on the client, you can do that with local storage. But you still need to save the data to the server, else if the user goes to a different machine or even browser, they won't have their data. Plus, your server side model probably needs to associate a user's content with their profile in some way. I don't think there is any way around it.