keep dynamically added elements after postback - jquery-ui

Question

i got a big problem with jquery and the postback.
i'm dynamically adding html elements to my page. e.g. JQuery UI Tabs.
but after postback ALL dynamically added elements are gone.
how can i keep all of these elements after postback and also the values of textboxes and datetimepicker?
greetz
Tobi
EDIT:
e.g. i'm adding some JqueryUI Tabs with this code:
$(function () {
var $tab_title_input = $("#tab_title"),
$tab_content_input = $("#tab_content");
var tab_counter = 1;
var $addButton = $('<li class="ui-state-default ui-corner-top add-button"><span>+</span></li>');
$addButton.click(function () { addTab(); });
var $tabs = $("#tabsTravel, #tabsWork").tabs({ autoHeight: true, fillSpace: true,
tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
add: function (event, ui) {
var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content.";
$(ui.panel).append("<p>" + tab_content + "</p>");
$("#tabsTravel ul.ui-tabs-nav").append($addButton);
}
});
$("#tabsTravel ul.ui-tabs-nav").append($addButton);
// actual addTab function
function addTab() {
tab_counter++;
var tab_title = "worker " + tab_counter;
$tabs.tabs("add", "#tabsTravel-" + tab_counter, tab_title)
.tabs("select", "#tabsWork-" + tab_counter, tab_title);
}
// close icon: removing the tab on click
$("#tabsTravel span.ui-icon-close").live("click", function () {
var index = $("li", $tabs).index($(this).parent());
$tabs.tabs("remove", index);
tab_counter--;
});
$("#tabsWork span.ui-icon-close").live("click", function () {
var index = $("li", $tabs).index($(this).parent());
$tabs.tabs("remove", index);
// tab_counter--;
});
$('#button').click(function () {
addTab()
});
});
how can i implement this localStorage to this code?
greetz
Bl!tz

Answer 1

Normally this would be the job of your server-side code; you would save the added elements in the the session cache, or in the database if the changes need to be permanent.
You could also consider using the new HTML5 session storage, or local storage, but this approach will probably be more of a hassle; best to use the sophisticated server-side libraries of PHP, .NET, etc, if possible.
Edit
Here's a simple example. Let's say your client script adds some HTML to the page:
var html = "<div>hello world</div>";
$("body").append(html);
Now, you can save it in local storage like this:
localStorage.setItem("dynamichtml", html);
If you put something in your page startup script like this:
$(document).ready(function() {
if (localStorage["dynamichtml"]) {
$("body").append(localStorage["dynamichtml"]);
}
});
Then you will have achieved the dynamic functionality. Note that the localStorage data will remain saved until the user deletes it explicitly.