CODEWITHSUNDEEP
javascriptclient-side
Michael
Michael

Reputation: 10303

How to hold the state of JavaScript web application?

Suppose I am writing a simple single-page web application in JavaScript. The application just displays employee records. User enters search parameters, the application fetches employees records from the server using AJAX and displays them in the web page.

The application state is search params and employees. How to store them in the application? I see two options:

Does it make sense? What are the pros and cons of these two options?

Upvotes: 0

Views: 1913

Answers (5)

Khanh TO
Khanh TO

Reputation: 48972

  • In this case, you can trigger a change in your hash when user applies a filter. For example: http://www.mydomain.com/index.html#name=abc&department=def . Your app listens for changes in the hash to update accordingly. Libraries like: crossroads.js, sammy.js allow you to to that. This approach on client side borrows the routing concept on server side.

  • Using this approach, you can send the url to your friends to "jump" directly to a specific state of your application and you can also reuse it, store it anywhere.

Upvotes: 1

Linuxios
Linuxios

Reputation: 35803

If you want them to be persistant, you can't use the DOM, and you shouldn't. HTML is for your user interface and linking everything together, not for data storage of your app. You have a couple of options. You can use global variables in your JavaScript, but you have to remember that they will not persist between visits to your page. If this is what you want, go ahead.

Another option is to use HTML5's Local Storage, which is persistant and designed for storing data.

Your last option, which is important if you don't want to store the data locally but do want to persist it, is to use HTTP AJAX GET and POST with a servlet or something on the client side that gets and sets the data, respectively.

If you want to go the old way, you could also use cookies instead of Web Storage. I definitely suggest the later though.

Upvotes: 1

Peter-Paul van Gemerden
Peter-Paul van Gemerden

Reputation: 7011

Definitely the latter. The DOM was never designed as a data structure. On the other hand, creating an architecture to keep the DOM in sync with your custom data structure can be a pain.

Luckily, there are frameworks that can help you with this. Most of these follow an MVC- (or MV*)-like design pattern. Examples include Backbone.js, AngularJS, Spine, Agility.js, JavaScriptMVC and many others. Have a look around.

Also check out this project: TodoMVC. It might help you decide whether to use a framework like this and, if so, which one.

Upvotes: 1

Tom
Tom

Reputation: 962

You might consider using this kind of leverage if you use HTML 5 :

http://www.jstorage.info/

Upvotes: 0

timothyclifford
timothyclifford

Reputation: 6959

If you are targeting modern browsers, Web Storage would be a good option for you to look into.

Good write up here: http://sixrevisions.com/html/introduction-web-storage/

That way all load would be kept within the client and data would persist between requests and if user leaves and comes back to application.

The options you mentioned which I'm guessing means you would store data within hidden DOM elements would be easy to develop however you will lose all persistence. If you're going to go down this path, why not just store the data directly in javascript objects?

Another good read: http://diveintohtml5.info/storage.html

Upvotes: 1

Related Questions