We Keep Coding

Angular 2+ Service for getting application changes and uploading to server

I am working on an Angular 4 project and I'm a bit stuck on how to implement the following.
Steps:
User uses the application and things change on it
These changes are saved locally using localStorage
A Service listens for changes in the data and if there are changes it uploads the changes to the server.
My idea behind saving the data locally is that the user doesn't have to get involved on sending the data to the server and also if the serve was to go offline, the user can still continue working via the local data available.
My question is...Is this a good idea or are there better ways of doing this with Angular ?

Your idea is good, here are steps to implement it:
1、Create a storage service, e.g. StorageService, to save data in localStorage
2、Create a update service, e.g. UpdateService, to get data from localStorage and upload to server
3、In StorageService, every time the data changed, call UpdateService
4、In UpdateService, you can detect whether network is online or offline, and you probably want a lastUpdateTime field, to record the last time when you successfully update the data to server, so you can control the frequency of update

I suggest you to make an entry in the server first, if you do not have a network or your save call to server fails your local storage will never have the correct data. My suggestion will be,
User uses the application and things change on it,
A Service listens for changes in the data and if there are changes it uploads the changes to the server.
if above call succeed save it in your LocalStorage,
still if you wish to save the data I suggest you try to keep it away from the view logic.

How to maintain state of an app after a refresh, AngularJS?

I'm trying to make a basic social networking application following Write Modern Web Apps with the MEAN Stack book.
The end result should be: https://mean-sample.herokuapp.com/
I got through to getting user accounts set up, having a user log in and create a personalized post. But as soon as I refresh, the user gets logged out.
What am I doing wrong? And how do I fix this?

In the client side we cant maintain the session, we need the server support to it. There are many ways to maintain the session
1 Token based, for each request to the server, the server will check whether token exists or not.
2 We can store in the localstorage while refresh the rootscope will be, at that time we can take from local store and populate the page objects.
Maintaining in server side is secured and advisable.

use localstorage, it will help you in maintaining the session and also store user details temporarily.
Refer this for more details
https://github.com/grevory/angular-local-storage

Storing data locally in browser and sending to server

I have read about HTML Filesystem and LocalStorage but I'm not sure what is the best way to implement what I need, if it is all possible.
Basically what I need is for the browser to store some data, preferably XML format, and then send this to server. My ideal implementation is writing to a text file and then uploading this file to the server. But I understand this is not possible to do locally in browsers.
Also I read that Filesystem is not being supported anymore. So is Localstorage the only option to store information in client side?
The biggest problem I would have with Localstorage is that I might have multiple pages, but I need all of them to write to one place.
For example let say I have a web app and the user starts with page A, then navigates to page B and then page C and so on. I need to store some information on each page, and then finally, say page D, I want to send all the previously stored data to the server.
So firstly, am I trying to do something impossible?
If not, what is the best way to go about this?
Thank you.

To simply answer your question, yes, you can achieve that. You can store anything in key value pairs in the local storage from different pages and you can send it to the server whenever ready. You can also look at session based storage if you want it to be saved only for a session.

Passing values from one page to another page in JS

I have one query on JavaScript.
How we can pass values from one page to another page?
I am working with ASP.NET. My requirement is, I need to validate the user, whether his session expired or not. If the session expired then I need to show a pop up with two textboxes to enter his credentials.
In which case I was unable to do that in ASP.NET. So though of doing with the help of JS. But not getting ideas.
I know we can pass values from one page to another using querystring. But as per the security purpose that is not to be used in my app.
Please help me out.
Thanks in Advance.

Don't do that on the javascript side. Remember that you can't trust the client side.
Use ASP.NET to do this.
See this tutorial to get some help about using sessions: http://www.beansoftware.com/ASP.NET-Tutorials/Managing-Sessions.aspx

You can save the users info in a session, for example his id and current request time. Then you can compare the previous request time, which you saved while processing the previous request, with the current time. You save the current request time in the session again. If it's been to long ago you show him the login popup. If you need a more secure way of passing the login credentials I recommend using a ssl certificate.

You can set cookies. That's also not really secure, but it's obviously a lot more secure than query strings, though if you're dealing with something that requires more security than what cookies offer, then I would suggest that you're doing something really wrong. (Welcome to Stack)

Why isn't my Javascript setting the right cookie?

On my application, a session is created whenever the user is logged in, and this session is updated on the db and session is saved on cookies as well (using perl)
Now I modified the code to update the session using javascript. However when I log out then in again, the session found in the database is different from that found in the cookies. For some reason the cookies is not being updated using Perl after it is being updated using javascript. I don't what wrong I'm doing.
In javascript I do this:
createCookie(cookie_name,cookies_value);// where cookie_name is same as the one on Perl
Any help?

Sessions are normally lost when you log out of a web app, so it's expected to get a new one when you log in again. Without knowing your session implementation and login/logout code, there's no way of knowing if that's the cause of the issue.

What cookies are sent with the request? Which cookies are stored by the browser? Verify everything by inspecting the HTTP transaction, etc. then tell us what you find. Be a lot more specific than "It doesn't work".