Q:

Storing credentials in Angular SPA

I have an authentication service in my Angular SPA that needs to store a JWT token so that it can send it back to the server in the headers each time (the API requires that it be included in it's own header called Authentication-Token)
At the moment my auth service just keeps it in memory but obviously this requires a new login if the page is refreshed or they open a page in a new tab so I need to store their details somehwere a little more permanent. As far as I can see I have a few options but none of them are ideal
A) - Store them in a cookie - But then the token will get sent twice with every request, along with other data like the user's profile data which needs to be stored alongside it.
B) Local Storage - This seems like a good option but it has a limit and if it is full (let's say a data caching service is filling it up) then it will simply not store the details. There seems to be no way to ring-fence enough space to store all the user's details reliably
c) Session Storage - As above but doesn't work if the user opens a new tab
d) Have the details sent down from the server on each page load and use ng-init to stash them in memory before any calls are made to the API. That would be fine, but my site is currently a plain HTML site which calls an API, it's not a PHP/Node/.net site at the moment so I'd have to introduce server side stuff to get the token.
So, does anybody have any better ideas? Or any way to work round any of these problems?

A:

I normally use LocalStorage or SessionStorage (depending on requirements).  The limit is 10MB (combined local & session) per origin, so you should be able to manage that within your app, or figure out some other way to make sure the credential space is protected.  

