Persist data in same window even if url changes

Question

I have graph with data in welcome page like widget(/welcome). when the user clicks the graph the page change to /home/default and the same graph should be displayed along with some extra data which is populated by Ajax call. What I want is to persist the graph data from /welcome into /home/default page. I don't want the data to go controller and back to the /home/default page. Kindly suggest.

Answer 1

In a nutshell, you need to set some state for the user and then when the /home/default page is rendered, you need to check that state and make corresponding changes to the presentation of the page.

This can be done either server-side (in the rendering of the page) or client-side (via Javascript adding things to the page).

If you do this client-side, then the state can be stored in a cookie, in LocalStorage or in a query parameter in the URL when you redirect. Then, you place Javascript code into /home/default that checks that state and adds content to the page dynamically based on the state.

If you do this server-side, then the state can be stored in a cookie or in some server-side data store and then when the /hoome/default page is rendered, your server side page rendering process can check the state for this particular user and modify the rendering of the page to include the desired content.

Answer 2

You have a plethora of options. The best solution depends on how your application is currently implemented -- whether in a framework or not, with sessions or not, etc. The principle whatever method you choose is almost identical : store a value and then retrieve it later.

Single Page Application ( SPA )

If you aren't already using a framework, I would urge you to consider migrating to one as tasks like these are made infinitely more elegant in their implementation.

Service / Data Store

If you are building an SPA then you may not have to consider any of the options below... so long as it doesn't matter if the data is lost if the user performs a 'real' navigation that cannot be intercepted by the framework (for example, refreshing the page).

In Angular you can maintain a temporary data store in the form of a service . Simply store the data and then pick it up later from another controller. Similar functionality can be achieved in all other popular SPA frameworks:

• Angular
• Ember
• React

Local Storage

Local Storage is available in IE8 and above and has a really simple API.

• Angular: angular-local-storage
• React: react-local-storage
• Ember: ember-local-storage-adapter
• jQuery: jStorage

IndexedDB

If you're into the cutting edge and aren't tied down by browser support, consider using IndexedDB. I don't recommend using this unless you are wanting to persist large amounts of data remotely on the client's machine. (It really does have bad support at the moment.)

• Angular: angular-indexed-db
• React: ???
• Ember: ember-indexeddb-adapter
• jQuery: jquery-indexeddb

Cookies

If your application is inflexible then cookies will be the easiest and least time-consuming. However Local Storage may be a contender.

• Angular: $cookie service
• React: react-cookie
• Ember: ???
• jQuery: jquery-cookie