Parable of the lost state

- Hello ...
- Aaaa!
- Well, what are you doing?
- I am afraid of you!
- What is it?
- You always humiliate me ...
- Heh, okay, I will not.
- True?
- Daw, do you want some candy with Ajax?
- Of course!
- Tada come on, fly to us in Peter. Here is a list of flights for which there are tickets sorted by price: rasp.yandex.ru/search?cityFrom=Saint-Petersburg&cityTo=Moscow
- Um ... something you lied uncle - there are generally all flights from Moscow to St. Petersburg, sorted by departure time.
“Um ... really, it didn't work out well ... and you mean why?”
- Ne?
- Because the state of the application does not affect the uri. Therefore, each time going to this page from the bookmarks, you will have to reinstall the filtering and sorting.
- Bloo, how to be?
- To reconcile, because as a visitor you can not do anything.
- And if I were a developer?
- Then you could go along the REST path and make the state of the application completely dependent on uri.
- But then there will be a reload of the page.
- And you only change the hash-part of the page.
- But how do I know that uri has changed?
- There are libraries for this.
- What if the state of my application is a multidimensional structure?
- Use Hiqus .
- Oh, how difficult it all is ...
- Yes, what is there difficult? Look:

HashState.listen( function (){ // <br> console.log( 'state changed to: ' + HashState ) // <br> console.log( 'filters: ' + HashState.sub( 'filters' ) ) // <br> console.log // <br> ( 'order by: ' <br> + HashState.get( 'order' , 'by' )<br> + ' ' <br> + ( HashState.get( 'order' , 'reverse' ) ? 'desc' : 'asc' )<br> )<br>})

- A change as a condition?
- Yes, elementary:

HashState.put( 'order:by:cost' )<br>HashState.put( 'order' , 'reverse' , true )<br>HashState.put( 'filters' , { type: 'airplane' , free: true } )

- And wash?
- Yes, also not a problem:

HashState( '' ) // <br>HashState.put( 'filters' , '' ) //

- It seems nothing complicated.
- Namely. Catch Lieb and blow on all pores in St. Petersburg, and then all the tasty things will be eaten:

var HashState= new function (){<br><br>Version: 1<br>Description: 'stores data in hash part of uri' <br>License: 'public domain' <br><br>Implementation:<br><br> var handlers= []<br> var latency= 25<br> var timer= 0<br> var hrefLast= '' <br> var dataLast= null <br> var data= null <br><br> var has= function ( list, item ){<br> for ( var i= list.length - 1; i >= 0; --i ) if ( list[i] === item ) return true <br> return false <br>}<br> var drop= function ( list, item ){<br> for ( var i= list.length - 1; i >= 0; --i ) if ( list[i] === item ) list.splice( i, 1 )<br>}<br><br> var listen= function ( handler ){<br> if ( has( handlers, handler ) ) return <br> handlers.push( handler )<br> schedule()<br>}<br> var forget= function ( handler ){<br> drop( handlers, handler )<br> if ( !handlers.length ) freeze()<br>}<br><br> var freeze= function (){<br> timer= clearTimeout( timer )<br>}<br> var schedule= function (){<br> freeze()<br> timer= setTimeout( update, latency )<br>}<br><br> var update= function (){<br> var href= document .location.href<br> if ( href !== hrefLast ){<br> data= Hiqus( href.replace( /^[^#]*#?/, '' ) )<br> if ( dataLast+ '' != data )<br> for ( var i= 0, len= handlers.length; i < len; ++i )<br> handlers[i].call()<br> hrefLast= href<br> dataLast= data<br> }<br> if ( timer ) schedule()<br>}<br> var change= function ( data ){<br> document .location= '#' + data<br>}<br><br> var HashState= function (){<br> if ( !arguments.length ) return Hiqus( data )<br> change( data= Hiqus.apply( null , arguments ) )<br> return HashState<br>}<br><br>HashState.prototype= function (){<br> this .listen= function ( handler ){<br> listen( handler )<br> return this <br> }<br> this .forget= function ( handler ){<br> forget( handler )<br> return this <br> }<br> this .revive= function (){<br> schedule()<br> return this <br> }<br> this .freeze= function (){<br> freeze()<br> return this <br> }<br> this .put= function (){<br> HashState( data.put.apply( data, arguments ) )<br> return this <br> }<br> this .get= function (){<br> return data.get.apply( data, arguments )<br> }<br> this .sub= function (){<br> return data.sub.apply( data, arguments )<br> }<br> this .toString= function (){<br> return '' +HashState()<br> }<br> return this <br>}.apply( HashState )<br><br>update()<br><br>Export: return HashState<br><br>Usage:<br><br>HashState.listen( function (){ // observe changing <br> console.log( 'state changed to: ' + HashState ) // all state <br> console.log( 'filters: ' + HashState.sub( 'filters' ) ) // sub state <br> console.log<br> ( 'order by: ' <br> + HashState.get( 'order' , 'by' ) // one value <br> + ' ' <br> + ( HashState.get( 'order' , 'reverse' ) ? 'desc' : 'asc' )<br> )<br>})<br>HashState( '' ) // clear all <br><br> // add parameters <br>HashState.put( 'order:by:cost' )<br>HashState.put( 'order' , 'reverse' , true )<br>HashState.put( 'filters' , { type: 'airplane' , free: true } )<br>HashState.put( 'filters' , '' )<br><br>}