I have a page which alters the dom based on user interaction. However, the user might click on a link, which will navigate to an external site. If the user clicks the back button, my page is shown again, but the dom changes do not persist.
What is the best way to keep track of the user interactions so I can rebuild the page on their return?
To maintain state and rebuild the page, I need to keep track of 7-10 variables.
Some ideas I had:
server-side session - would require a callback to the server every time a variable changes value?
client-side cookies - what if the user disables cookies?
hidden form fields - most (all?) browsers locally cache form data, so hitting the back button should retain?
In most cases I'd say the best way to do this, is to represent the page state in the URL.
Here's why:
Because a URL is such a simple concept, this method works regardless of what browser or what privacy settings (e.g. allow cookies and local storage) are used.
If User A would send the URL to User B who would like to see the page in the same state, this would still work. This wouldn't be the case for any of your considered methods.
If the variables you want to keep track of are related to a specific user (or session), it would be wiser to track these in some sort of session. This could be both server- or client-side.
Local or session storage (HTML5 Local storage vs. Session storage) are possible solutions, but have some limitations.
Doesn't work in every browser or browser settings (HTML5 local storage isn't supported in older browsers and I know for instance that running Safari in private mode doesn't allow local storage)
If you would send the link to another user he wouldn't see the page in the same state because he hasn't visited the page before, and his local or session storage hasn't been filled with the correct values.
Try the Session variable:
sessionStorage.setItem('key', { "data": "mad data here" });
then to recall it:
var data = sessionStorage.getItem('key');
You could use jQuery as such upon loading the page:
document.load(function() {
var data = sessionStorage.getItem('key');
if (data) {
data.doStuff();
}
}
Related
I'd like to create a web app where the user is able to create a session, with the session being accessible even after leaving the page/browser.
An example would be http://lichess.org where the user goes to 'Create a game' and a page is created. That page then remains accessible even after the session is finished; see: http://en.lichess.org/i8pV0vEv
Essentially what I'd like to know is, what would be needed in order to create a similar effect. I've programmed tonnes over the years, just web environments are new to me! Scala seems like a contender, but in all honesty I have no clue. Perhaps javascript?
Any advice would be appreciated, thanks.
If you want to store user session data permanently irrespective of whether user is on the website or not you may use browser storage facility of HTML 5.
where you can store data on user's browser in form of key value pair and the data will be there permanently(based on type of browser storage you are using) and you can easily manipulate data using javascript.
There are mainly two types of browser storage.
Local Storage: will be there permanently and can be accessed anytime you want.
Session Storage: will be there till the page is open and cleared when user close the browser window.
For your requirement my recommendation is to go for Local Storage
Advantages of Using Local Storage
Can be manipulated easily using JavaScript.
Will be permanent.
No server-side scripting hence, fast to load and manage.
Disadvantages of using local storage
won't work in browser not supporting HTML5(supported in IE 8,chrome 4,Mozilla 3.5,safari 4,opera 11.5 and above)
User will be able to manipulate/delete the value(The browser storage value can be manipulated using resource option of Browser developer tool)
Wont be permanent if user is visiting in In-cognito/in-private mode.(but will be stored during the session.)
Data limit of at least 5MB
Data will be deleted when user clears browser history.
for further reference checkout w3schoold
http://www.w3schools.com/html/html5_webstorage.asp
Web programming is generally session-less and you need a cookie to simulate a session. You save this in your client's browser and in a database to be able to tie them together. Or you can use the browser-session which in the end is also a cookie, but does not scale very well as it's saved in the internal mechanisms of the web-server.
There's nothing Scala specific here, but if you would like to give Scala a try, have a look at Play framework. It's pretty beginner friendly and already has built in support for everything you would need like Sessions, Cookies and Database access.
So we have a web application that is accessed through a link from an email. When the user clicks on the link, we call a web service to pull the necessary data to the client. This data is then stored in the client's localstorage for the span of the user's session and cleared after.
The problem here is that if a user clicks on the link twice and logs out of one of the sessions, the local storage is cleared for both of the sessions.
So I've been thinking about solving this issue and here are my possible solutions:
Reusing the same tab for the external links of the same domain. But its not possible as of now.
Append the session Id to the keys of the localstorage and clear only them at logout. But in this case if someone does not logout properly, the local storage items will still persist and we don't want that.
So I'd like to know if there is any way to keep the local storage session specific or else if I should be skipping localstorage entirely. Thanks!
Use sessionStorage instead of localStorage. sessionStorage is specific to tab and those will be cleared on that tab. But sessionStorage is specific to one session that is from the point window opened to the close of that window.
I need a solution based on java script(cookies), which could save the user selected preferences and render the output(html pages) acc. to the cookie saved.
Here is the situation:
Lets say user starts from page1 and navigates to page2(having 40-50 hyperlinks) and there he selects or clicks one of the hyperlink and get directed to the target page(there will be 40-50 pages corresponding to those 40-50 links).
So all i need is to automate the whole process, so that after first visit user's selection could get saved and he will directly get navigated to final target(It will be one of the page from 40-50 pages).
Any code-snippet will highly be appreciated..
mrana
I am curious to know why can't you do this in a preference table on the server side. Cookies can be removed from the browser (which would force users to go through that step again) and storing 40-50 cookies in the browser is not a good solution, as cookies get transmitted to every HTTP request so it would waste users' bandwidth.
If you have these settings/preferences stored on the server side then you can easily determine where to send the user when he logs in to your site, instead of extracting those information from the cookies.
Alternatively you can store these preferences in localStorage which provides bigger storage for storing key/values. The downside is that you need to load a bootstrap JS first which will read the settings from localStorage and decide where to redirect the user.
But IMHO I'd still go with a server side solution if I have to store 40-50 preferences.
Note: Cookies can only have 4KB of data, this is a limit.
Our intranet site has an unusual set of requirements.
It functions like a multi-page desktop application. For a single client, our users will be entering information on up to 30 screens.
It is an Asp.Net MVC3 based site with all session state disabled for efficient operation on a web farm.
For privacy reasons, we cannot use the query string to show any client information. We are currently using cookies to store client identification.
Our user base wants to have multiple tabs open in one browser (IE, FF or Chrome).
If I assume that the user is only going to be using a single, then I can store the client info in a simple cookie and everything works fine.
When the user opens a second tab, it would reuse the same cookie. Not the desired condition. So is it possible to determine the difference between the browser tabs?
You can use the sessionStorage object to store data specific to a single window/tab. It works just like any other JavaScript object, in that you can assign (sessionStorage.foo = "bar"), retrieve (baz = sessionStorage.foo) and delete (delete sessionStorage.foo), but unlike other JS objects any properties set will be persistent across pageloads in a single window.
The only downside is that it doesn't send this data to the server. You have to do this yourself using an AJAX call.
Look into the window.name variable. On page load you can put something unique in it, like the date/time, and store the same thing in your cookie (if its not present). If the user opens a new tab (or window), the value will be empty and the cookie won't be. window.name persists across page loads (if memory serves), so this will allow you to uniquely identify each tab.
This is in context to an ASP.Net application. The application makes use of a specific data which is set for a page. After this data has been set all the operations from this page onwards use the set data.
The problem is that if the user opens another tab with a competing data it overwrites the older data for the same session and for the same user which invalidates the operations on the first tab.
I know the suggested way is to refactor the code to remove such coupling but that is not possible. Here's another thread that discussed this but didn't specify any solutions other than refactoring the code (http://stackoverflow.com/questions/632062/ways-to-detect-ctrl-n-or-when-a-user-opens-a-new-window)
So, how can I detect (and notify the user) or stop the user from opening another tab - through javascript/Jquery?
You could set a session variable isActive and set it to true, along with all the other session data when the user opens the application the first time. After this, if the user opens another tab, check to see if isActive is true. If it is, inform the user and don't set the data again.
In pseudo-code, your logic should flow like this
if (!isActive)
//set session data
else
//alert the user: You have another active session
This would be a better solution because there is no guarantee the user does not visit the page to set the session, then temporarily turn off Javascript to launch a new tab without you being notified.
You should realize that you cannot prevent multiple pages being open on the same site by the same user. A user can always do such an operation using multiple different browsers on the same computer or browsers on different computers. As such, what you really need to do is to design your application to either just handle this situation gracefully or detect such a conflict and decide what the safest action is to take when it occurs (chances are, at the server, you either ignore the data from all sessions but one or you somehow merge them all together). What the safe action is depends upon what the data is or how it was changed.
The most straightforward option is to coin a new server-based session for the user each time the user visits and, at the server, invalidate all previous sessions so any older session that tries to make any future updates to the server will be denied because of an invalid session. This prevents any sort of multi-session data conflict.
If you want to be able to inform the user when their session becomes invalid, you could do a slow poll of the server (say once every 20 mins) as long as the window is open and on your site to check the session validity such that you can inform the user when their session has expired.