Difference between Session Storage, Local Storage and Cookies in AngularJS

Question

I would like to dig down into Angular, and for that i would like to know the difference between Session Storage, Local Storage and Cookies.

Problem Questions ---

1) $windows.sessionStorage can be used to store user session but the problem with it is, when you open something in a new tab it again ask the user to login.

2) Will Local Storage would be a solution to problem question 1 ? and if so, does that mean i need local storage and session storage both in my app or local storage will act as session storage as well.

3) I am also working on Remember me on my login form - is it safe to store password and email of the user in the local storage for this, if not what is best way to do remember me in angular

4) Cookies are great, but does corporate companies allow them on there browser?

Hoping to find decent answers

Thanks

Solution 1

1) It is correct that sessionStorage is temporary, and it has been designed to do so.

2) Local storage will solve the issue of the login going away with a new browser session being opened or after waiting a long time, but no, localStorage will not act as a session cookie for browser requests.

3) Many different server side applications support encryption and tamper-resistant cookie support for applications. That being said, it is always best not to store user passwords in the client, maybe a token perhaps that your server will recognize and be able to decrypt/decode and look up the correct user record.

4) I would say nowadays yes, cookies are generally accepted to be safe, however that is always a possibility, and depending on your clients or audience you may have an issue there. Also sessions won't work if cookies are disabled in the browser. (Though my outlook on this is speculation on a general population, ie: don't quote me on that)

My recommendation for your needs is to set a session variable when the user encounters the page. Then store the result in localStorage or with a cookie, and then when the user returns to the application after the session has died, have some architecture set up to re-authenticate and re-assign the session automatically.

Hope this helps!

Edit: Session Cookies are shared between browser tabs within the same window. However Session Storage has been pointed out not to be.

Solution 2

localstorage will work across tabs:

There is a demo here:

http://www.undefinednull.com/2014/02/25/angularjs-real-time-model-persistence-using-local-storage/

Comments

[GeekOnGadgets]

In Angular the session storage- losses the information when opened in new tab.Unless i am doing something wrong. Nice answer though. Thanks

[SnareChops]

That is odd. Which browser are you using? or have you noticed this in all browsers?

[demisx]

Session storage is scoped to a particular tab/window and it is not shared between browser tabs even if they access the same URI. If you need to share something between two tabs or windows, you need to use localStorage. Note, same-origin rules still apply.

[GeekOnGadgets]

@SnareChops yes with all the browsers.

[SnareChops]

@GeekOnGadgets I corrected my statements as Session Storage apparently does not transfer between tabs, however Session Cookies do.