Как сохранить содержимое пользовательского интерфейса после переключения состояний?

Question

Я использую $ stateprovider для переключения состояний между моими страницами. Когда я нажимаю на панель навигации, устанавливается ui-sref, и шаблон для этого состояния загружается в ui-view.

На одной странице пользователи могут динамически добавлять элементы DOM в шаблон. Но как только я переключаю страницу и возвращаюсь к ней, загружается оригинальный шаблон, и я теряю все динамически созданные элементы DOM. Есть ли способ сохранить «состояние» этих элементов DOM, чтобы не потерять его при переключении страниц?

Вот пример кода

<div class="database-tabs" id="db-nav">
    <ul class="nav navbar-nav navbar-left">
        <li><a href="" ui-sref="main.page1"
               class=""
               ui-sref-active="selectedTab">PAGE1</a></li>
        <li><a href="" ui-sref="main.page2"
               class=""
               ui-sref-active="selectedTab">PAGE2</a></li>
        <li><a href="" ui-sref="main.page3"
               class=""
               ui-sref-active="selectedTab">PAGE3</a></li>
        <li><a href="" ui-sref="main.page4"
               class=""
               ui-sref-active="selectedTab">PAGE4</a></li>
    </ul>

 </div>
 <div ui-view></div>

// State provider code
$stateProvider
    .state('main', {
        abstract: true,
        url: '/main',
        templateUrl: 'mainTemplate.html'
    })
    .state('main.page1', {
        url: '/page1',
        templateUrl: 'page1.html'
    })
    .state('main.page2', {
        url: '/page2',
        templateUrl: 'page2.html'
    })
    .state('main.page3', {
        url: '/page3',
        templateUrl: 'page3.html'
    })
    .state('page4', {
        url: '/page4',
        templateUrl: 'page4.html'
    })