Template to make userId available to JavaScript without busting the cache
I have a website with multiple pages.
Some of these pages need userId and userName for any processing in JavaScript context.
Note. The user id is not used for security and is not sent back to the server, so merging is not an issue.
Question: What is a good way to pass userId and userName in JavaScript context.
UPDATE Ideally I would like to get a generic template that can be used to pass any kind of data (such as defaults for sorting the list and filter settings) from the server to JavaScript code, so that I don't solve the userId problem any differently than the problem of passing initialSort and initialFilter.
Here are some approaches I could think of. I understand that this will all work, but I hope for an even better model. I am also interested in exploring the other downsides of the solutions I am considering here:
1. Pass the userId and userName from the server as a non-server cookie.
Cons: The cookie will be sent back to the server with every request, which is a waste (although not significant).
2. Using custom headers
Cons: headers are not available to javascript for the initial request.
3. Make an AJAX request to get the data
Cons: Requires additional HTTP travel.
4. Display the data in a string on the HTML start page.
Cons: unpacks the cache and makes the page not cached.
5. Reverse polarity (works every time in Star Trek), my favorite so far
Instead of getting most of the HTML on the initial trip, rewrite the page so that the start page returns mostly data and the markup is loaded (and cached) separately. For example:.
<html><body>
<div data-bind="template: 'pages/invoices'" /> <!-- using KO external template to load markup -->
<script src="require.js"></script>
<script>
require([...], function (...) {
var vm = new PageViewModel('userId-bob', 'Bob Smart'); // <-- content rendered by server
ko.applyBindings(vm);
});
</script></body></html>
Cons: the page is hostile search robots (not a problem in my case).
source to share
What I would do is use sessionStorage.
When the page loads, check the sessionStorage object for the data you need.
If the data doesn't exist in sessionStorage, then you know this is the first time the page has loaded (at least for this session). Then you can make an ajax call to retrieve this data and store it.
If the data exists in sessionStorage then you don't need to make any additional ajax calls.
This should lead you to one and only one additional HTTP trip per session, which seems reasonable to me.
Something like
if(sessionStorage.userId && sessionStorage.userName) {
//the data exist, assign them to a global var or pass to the function that needs them
} else {
//the data do not exist, make an ajax request to get the data and store them
}
source to share