切换状态后如何保存ui-view内容？

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'
    })