js怎么保存之前的树形的结构状态呢？

Question

我在一个用户控件中，用js创建了一个树形结构。现在我点击树形的节点就会跳转页面，并且这些页面都调用了这个用户空间，在跳转之后，我想保存我点击是树形的结构状态。怎么保存之前的树形的结构状态呢？<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebModuleList1.ascx.cs" Inherits="WebUserControl" %>
 <div id="content_left">
               <div class="left_k_top"></div>
               <div class="left_k_cen">
                    <div class="search_mk">
                    <center><h3 style=" color:White;">版块入口</h3></center>                        <table style="display:none;"><tr><td><asp:TextBox ID="Txtmodulename" runat="server" Width="78px" 
                                BorderStyle="None"></asp:TextBox></td>
                        <td> 
                            </td></tr></table>
          </div>
                <div class="left_nav">
<style> body,ul,h3 {margin:0px; padding:0px;}
li{list-style-type:none;}
#menu a{text-decoration:none;color:#FFF;border:none;}
#menu a:hover{text-decoration:none;color:#C33;}
#menu {line-height:15px;font-size:12px;}
#menu h3 {font-size:12px;}
#menu ul { background:url("<%=ResolveClientUrl("~/images/ul-bg.gif")%>") repeat-y 5px 0px; overflow:hidden;}
#menu ul li.top {padding:5px 0 2px 15px;background:url("<%=ResolveClientUrl("~/images/tree-ul-li-top.gif")%>") no-repeat 5px -1px;} 
#menu ul li {padding:5px 0 2px 15px;background:url("<%=ResolveClientUrl("~/images/tree-ul-li.gif")%>") no-repeat 5px -32px;}
#menu ul li ul {display:none;}
#menu ul li em {cursor:pointer;display:inline-block;width:15px;float:left;height:15px; margin-left:-14px;background:url("<%=ResolveClientUrl("~/images/tree-ul-li.gif")%>") no-repeat -32px 2px;}
#menu ul li span {cursor:pointer;display:inline-block;width:15px;float:left;height:15px;margin-left:-14px;background:url("<%=ResolveClientUrl("~/images/tree-ul-li.gif")%>") no-repeat -32px 2px;}
#menu ul li em.off {background-position: -17px -18px;}
#menu ul li span.off {background-position: -17px -18px;}
#menu ul li#end {background-color:#015E8E;}
#menu ul.off { display:block; color:White;}
</style>
<div id="menu" style="width:200px">
<ul>
 <asp:Repeater ID="RPtreev" runat="server" OnItemDataBound="rptCategories_ItemDataBound">
     <ItemTemplate>
      <li><%#GetmoduleCount(Eval("mid"))!= 0 ? "<em></em>" :"<span class='off'></span>"%><a href="<%=ResolveClientUrl("~/Web/BBSList.aspx")%>?moduleID=<%#Eval("mid")%>"><%#Eval("modulename")%></a>
        <ul>       
        <asp:Repeater ID="RPtree" runat="server" OnItemDataBound="RPtree_ItemDataBound" >
        <ItemTemplate>
            <li><%#GetmoduleCount(Eval("mid"))!= 0 ? "<em></em>" :"<span class='off'></span>"%><a href="<%=ResolveClientUrl("~/Web/BBSList.aspx")%>?moduleID=<%#Eval("mid")%>"><%#Eval("modulename")%></a>
              <ul>
                <asp:Repeater ID="RPtree2" runat="server" >
            <ItemTemplate>
            <li id="end"><span class="off"></span><a href="<%=ResolveClientUrl("~/Web/BBSList.aspx")%>?moduleID=<%#Eval("mid")%>"><%#Eval("modulename")%></a></li>         
       </ItemTemplate>
       </asp:Repeater>  
             </ul>    
           </li>
       </ItemTemplate>
       </asp:Repeater>  
       </ul>   
     </li>  
     </ItemTemplate>
 </asp:Repeater>
</ul>
</div>
<script type="text/javascript">
    (function (e) {
        for (var _obj = document.getElementById(e.id).getElementsByTagName(e.tag), i = -1, em; em = _obj[++i]; ) {
            em.onclick = function () { //onmouseover
                var ul = this.nextSibling;
                if (!ul) { return false; }
                ul = ul.nextSibling; if (!ul) { return false; }
                if (e.tag != 'a') { ul = ul.nextSibling; if (!ul) { return false; } } //a 标签控制 隐藏或删除该行
                for (var _li = this.parentNode.parentNode.childNodes, n = -1, li; li = _li[++n]; ) {
                    if (li.tagName == "LI") {
                        for (var _ul = li.childNodes, t = -1, $ul; $ul = _ul[++t]; ) {
                            switch ($ul.tagName) {
                                case "UL":
                                    $ul.className = $ul != ul ? "" : ul.className ? "" : "off";
                                    break;
                                case "EM":
                                    $ul.className = $ul != this ? "" : this.className ? "" : "off";
                                    break;
                            }
                        }
                    }
                }
            }
        }
    })({ id: 'menu', tag: 'em' });
  
   
      
</script>      </div>
           </div>
         </div>

Answer 1

页面刷新了，Document里面的对象肯定是丢失了。纯JS，不考虑HTML5中使用Storage的话，可以用Cookie，把页面的URI作为Cookie的一个键值，或标识。
每次操作tree的时候，都要同步在Cookie中记录。要注意Cookie的长度哈。新页面打开的时候，通过refer，可以获取前一页面的URI，这样就可以从Cookie中读出这个Refer页面的tree信息了。

Answer 2

纯JS的话，根本不用Cookie。因为页面又不刷新，Document又没有“丢失”，tree丝毫没有丢失，Cookie有什么用处呢？

Answer 3

没有什么成熟的办法。你可以考虑使用asp.net webform并且仅仅在当前页面回发（因为页面上成百上千的控件会自动保存状态），或者使用富javascript编程（因为页面并不刷新所以html元素都没有改变）。两种方式任选一种，但是不要搞混淆的中间路线。走中间路线，你是哪一种好处都持续不了，纠缠在状态上了！