title: Jquery UI Save State Using Cookie
body: <p>is there any way to save state of jquery layout ui??</p>
  
  <p>when i look at google, i got jquery.layout.state.js, but it seems not working :(</p>
  
  <p>what i want is that when the west or north panel is closed, then it will saved it's state to cookie, so that if we refresh the page, the panel state will still closed </p>
  
  <p>maybe anyone ever try it?</p>
  
  <p>thx in advanced..</p>
  
  <p>if there are some configuration in layout setting that can save state,
  then here is are my layout setting</p>
  
  <pre><code>var layoutSettings_Outer = {
  
      name: "outerLayout" // NO FUNCTIONAL USE, but could be used by custom code to 'identify' a layout
  
      // options.defaults apply to ALL PANES - but overridden by pane-specific settings
  
  ,   defaults: {
  
          size:                   "auto"
  
      ,   minSize:                50
  
      ,   paneClass:              "pane"      // default = 'ui-layout-pane'
  
      ,   resizerClass:           "resizer"   // default = 'ui-layout-resizer'
  
      ,   togglerClass:           "toggler"   // default = 'ui-layout-toggler'
  
      ,   buttonClass:            "button"    // default = 'ui-layout-button'
  
      ,   contentSelector:        ".content"  // inner div to auto-size so only it scrolls, not the entire pane!
  
      ,   contentIgnoreSelector:  "span"      // 'paneSelector' for content to 'ignore' when measuring room for content
  
      ,   togglerLength_open:     35          // WIDTH of toggler on north/south edges - HEIGHT on east/west edges
  
      ,   togglerLength_closed:   35          // "100%" OR -1 = full height
  
      ,   hideTogglerOnSlide:     true        // hide the toggler when pane is 'slid open'
  
      ,   togglerTip_open:        "Tutup Panel"
  
      ,   togglerTip_closed:      "Buka Panel"
  
      ,   resizerTip:             "Resize This Pane"
  
      //  effect defaults - overridden on some panes
  
      ,   fxName:                 "slide"     // none, slide, drop, scale
  
      ,   fxSpeed_open:           750
  
      ,   fxSpeed_close:          1500
  
      ,   fxSettings_open:        { easing: "easeInQuint" }
  
      ,   fxSettings_close:       { easing: "easeOutQuint" }
  
  }
  
  ,   north: {
  
          spacing_open:           1           // cosmetic spacing
  
      ,   togglerLength_open:     0           // HIDE the toggler button
  
      ,   togglerLength_closed:   -1          // "100%" OR -1 = full width of pane
  
      ,   resizable:              false
  
      ,   slideTrigger_open:      "click"     // default
  
      ,   slidable:               true
  
      //  override default effect, speed, and settings
  
      ,   fxName:                 "drop"
  
      ,   fxSpeed:                "normal"
  
      ,   fxSettings:             { easing: "" } // nullify default easing
  
      }
  
  ,   west: {
  
          size:                   250
  
      ,   spacing_closed:         21          // wider space when closed
  
      ,   togglerLength_closed:   21          // make toggler 'square' - 21x21
  
      ,   togglerAlign_closed:    "top"       // align to top of resizer
  
      ,   togglerLength_open:     0           // NONE - using custom togglers INSIDE west-pane
  
      ,   togglerTip_open:        "Tutup Panel Navigasi"
  
      ,   togglerTip_closed:      "Buka Panel Navigasi"
  
      ,   slideTrigger_open:      "click"     // default
  
      ,   initClosed:             false
  
      ,   resizable:              false
  
      //  override default effect, speed, and settings
  
      ,   fxName:                 "drop"
  
      ,   fxSpeed:                "normal"
  
      ,   fxSettings:             { easing: "" } // nullify default easing
  
      }
  
  ,   center: {
  
          paneSelector:           "#mainContent"          // sample: use an ID to select pane instead of a class
  
      ,   onresize:               "innerLayout.resizeAll" // resize INNER LAYOUT when center pane resizes
  
      ,   minWidth:               200
  
      ,   minHeight:              200
  
      }
  
  };
  </code></pre>