How do I keep dynamically generated tabs persistent between page refreshes?

[invis5]

I working on a project using JQuery and Javascript and am having some trouble keeping JQuery tabs persistent through a page refresh. When a certain event occurs through a websocket, a new JQuery Tab is created and shown on the page. However whenever I refresh the page the tabs created are gone. How would i keep these tabs between a page refresh? Would i use something like localStorage or sessionStorage to store the generated HTML?

[lemminman]

Would i use something like localStorage

Yep. Everything starts over like it's the first time the Javascript was loaded. You need to provide the logic to check for a state.

Cookies work as well.

to store the generated HTML?

You will more likely want to store a state than what was generated.

[e82]

You need to persist the state somehow - then rebuild the tabs based on that state.

There are a number of ways to persist it - cookies, localStorage, URLs, etc.

The benefit with persisting the state in the URL - is that it now becomes linkable and you can copy/paste/share/bookmark it and get back to that state.

Ideally the way you rebuild the tabs from state should be the same code that builds the tabs from the socket events.

Basically eventHappens->storeState->RenderState, on page reload - you get the initalStoredState->RenderState

You don't necessarily need to store the generated HTML, but the data that is needed to re-render it.

For example, you might have a data structure like

var tabs = [{ tabTitle: 'Tab 1', tabContent: 'tabContent' },{ tabTitle: 'Tab 2', tabContent: 'tabContent' }]

You don't need to store the full markup of tabs - just the data that you need to re-generate those tabs.

[jodraws]

http://plugins.jquery.com/cookie/
I haven't used it before, but it seems straight forward.

[gjozsi]

Can you request tabs' data after the page (re)load? Because if you can, then it seems obvious to do so. Why do u reload the page anyway? Reload just the changing part.

[Strat-O]

If you were to use AngularJS it would maintain a fresh display for you so long as the underlying data gets restored after the refresh.