Wednesday, July 9, 2008

Persisting data in a web app by using frames

[This was originally posted at]

A basic problem with developing web applications is that their foundation technology, html, is stateless. That means that you constantly need to jump through hoops in order to pass data from page1 to page2. Of course there are ways to solve this, such as using ASP.Net session state, querystrings, cookies, or persisting to a database. There is another way that may work for simple data if your app is hosted in a frame.


Say you have your main page, which is just a frameset. All the navigation occurs within that frameset, such that going from page1 to page2 merely updates the frame's url, it doesn't re-create the host page. This leaves the host page intact, including it's JavaScript state. Therefore, you could have a JavaScript variable persist data between pages.

    <title>My Apptitle>
    <script language="javascript" type="text/javascript">
      var _javaScriptVar = null;
      <frame src="Page1.aspx" id="mainFrame">

You could then reference this variable from your child pages via the DOM:

window.parent._javaScriptVar = "someValue";

This means that page1 could set the value, and page2 could retrieve that value. To the end user, it looks like data has been persisted across pages. You could also expand this using JavaScript hashtables to store name-value pairs of data, and then add wrapper methods for an easy API. This is a surprisingly simple approach, and it has pros and cons:



  • Very easy to implement for new apps

  • Scalable - as it stores data on the client, instead of on the server (like session state)

  • Can store strongly-typed data. This saves to a JavaScript variable, which can store complex data as opposed to just strings (although you could just use JSON to serialize most complex objects to a string and back)

  • It avoids cookies, which have their own limits and problems.


  • It messes up your URLs, as the user only sees the URL for the host page, not the child pages. (But this may be a good thing)

  • It is absolutely not secure, as any hacker could modify the JavaScript variables.

  • It does not persist across sessions - it's only good for convenience data on the UI.

Overall, it's a cute trick for certain apps. Although, I'd rather use Silverlight if I could.

No comments:

Post a Comment