location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。利用这个属性值可以做一个非常有意义的事情。

很多人都喜欢收藏网页，以便于以后的浏览。不过对于Ajax页面来说的话，一般用一个页面来处理所有的事务，也就是说，如果你浏览到一个Ajax页面里边有意思的内容，想将它收藏起来，可是地址只有一个呀，下次你打开这个地址，还是得像以往一样不断地去点击网页，找到你钟情的那个页面。另外的话，浏览器上的“前进”“后退”按钮也会失效，这于很多习惯了传统页面的用户来说，是一个很大的使用障碍。

那么，怎么用location.hash来解决这两个问题呢？其实一点也不神秘。

比如，我的作者管理系统，主要功能有三个：普通搜索、高级搜索、后台管理，我分别给它们分配一个hash值：#search、#advsearch、#admin，在页面初始化的时候，通过window.location.hash来判断用户需要访问的页面，然后通过javascript来调整显示页面。比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE HTML>
<html lang= "en-US" >
<head>
     <meta charset= "UTF-8" >
     <title>window.location.hash</title>
     <script type= "text/javascript"  src= "http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js" ></script>
     <script type= "text/javascript" >
         
         $(document).ready( function (){
         
             console.log( "--- begin...." );
         
             var  hash = (!window.location.hash) ?  "#search"  : window.location.hash;
             window.location.hash = hash;
             console.log( "hash : "  + hash);
             
             switch (hash) {
                 case  "#search" :
                     console.log( "search" );
                     break ;
                 case  "#advsearch" :
                     console.log( "advsearch" );
                     break ;
                 case  "#admin" :
                     console.log( "#admin" );
                     break ;
                 default  : 
                     console.log( "NO#" );
             }
             
             
 
         
         
         });
         
         
         function  go(hash) {
             //var hash = (!window.location.hash) ? "#search" : window.location.hash;
             console.log( " go --- hash : "  + hash);
             window.location.hash = hash;
             switch (hash) {
                 case  "search" :
                     $( "h2" ).html( "search" );
                     break ;
                 case  "advsearch" :
                     $( "h2" ).html( "advsearch" );
                     break ;
                 case  "admin" :
                     $( "h2" ).html( "#admin" );
                     break ;
                 default  : 
                     console.log( "NO#" );
             }
         
         
         }
         
         //测试：在地址栏输入：file:///C:/Users/Administrator/Desktop/hash.html#admin
     
     </script>
</head>
<body>
     
     <input type= "button"  value= "search"  id= "search"  onclick= "go('search')" />
     
     <h2>第一部分</h2>
     
     <input type= "button"  value= "advsearch"  id= "advsearch"  onclick= "go('advsearch')" />
     <br /><br />
     <input type= "button"  value= "admin"  id= "admin"  onclick= "go('admin')" />
     
     
     
</body>
</html>

参考 ：１　　　２　　３