A pattern to make userId available to a JavaScript without busting the cache
Question
I have a web site with few pages.
Some of those pages need userId and userName for whatever processing in JavaScript context.
Note: the user id is not being used for security, and is not being sent back to the server, so spoofing is not an issue.
Question: what is a good way to pass userId and userName to the JavaScript context.
UPDATE Ideally I would like a generic pattern that can be used for passing any data (eg default values for a list sort and filter settings) from the server to JavaScript code, so that I don't solve userId problem differently from problem of passing initialSort and initialFilter values.
Here are some approaches I could think of. I do understand that all of these will work, but I am hoping for an even better pattern. I am also interested in learning other cons of the solutions I am considering here:
1. Pass userId and userName from server as a non-server cookie.
Cons: cookie will be sent back to the server with every request, which is a waste (not a significant one though).
2. Use custom headers
Cons: headers are not available to javascript for the initial request.
3. Make AJAX request to get data
Cons: requires extra HTTP trip.
4. Render data in-line in the initial page HTML
Cons: busts the cache and makes page non-cacheable.
5. Switch the polarity (works every time in Star Trek), my favorite so far
Instead of getting most of HTML on the initial trip - rewrite the page so that initial page returns mostly data, while markup is loaded (and cached) separately. Eg:
<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: page is search-crawlers hostile (not an issue in my case).
2 answers
solution1
1 2014-12-01 19:14:00
What I would do is have it use sessionStorage.
When a page loads, check the sessionStorage object for the data you need.
If the data do not exist in sessionStorage, then you know that this is the first time the page has loaded (for this session, at least). Then you can perform an ajax call to fetch these data and store them.
If the data do exist in sessionStorage, then you don't need to perform any additional ajax calls.
This ought to reduce you to one and only one additional HTTP trip per session which seems pretty 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
}
solution2
0 2014-12-01 18:39:35
鉴于你的上下文，我可能会把它放在一个cookie中，而不用担心开销。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.