第89天：HTML5中訪問歷史、全屏和網頁儲存API

半指溫柔樂發表於2017-11-19
HTML網頁API

一、訪問歷史 API

通過history物件實現前進、後退和重新整理之類的操作

history新增的兩個方法history.replaceState()和history.pushState()方法屬於HTML5瀏覽器新增的屬性，所以IE9以下的是不支援的。

1、history.replaceState() ；顧名思義就是替換的意思，所以它的作用就是替換當前位址列的url

history.replaceState(data,”頁面的title”,”需要改變的url”) ；接收三個引數

2、history.pushState() ；看到push大家首先應該想到的是陣列，沒錯，這個方法就是往瀏覽器的history裡壓入一條url，就像資料結構裡的棧一樣，這個壓入的url會在棧

的最頂端，當你點選瀏覽器的前進或者倒退按鈕時，便會拿出棧頂的url來定位，從而達到改變history的作用但是並不重新整理！

3、popstate事件

當history實體被改變時，popstate事件將會發生。如果history實體是有pushState和replaceState方法產生的，popstate事件的state屬性會包含一份來自history實體的state物件的拷貝

4、讀取當前的state

當頁面載入時，它可能會有一個非空的state物件。這可能發生在當頁面設定一個state物件(使用pushState或者replaceState)之後使用者重啟了瀏覽器。當頁面重新載入，頁面將收到onload事件，但不會有popstate事件。然而，如果你讀取history.state屬性，將在popstate事件發生後得到這個state物件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>history API</title>
 6     <style>
 7         html,body{
 8             height: 100%;
 9             overflow: hidden;
10             margin: 0;
11             padding: 0;
12         }
13         aside{
14             background-color: #c0c0c0;
15             width: 220px;
16             float: left;
17             height: 100%;
18         }
19         aside ul{
20             font-size: 20px;
21             line-height: 2;
22         }
23         aside ul li{
24             cursor: pointer;
25         }
26         article{
27             background-color: #f5f5f5;
28             margin-left: 220px;
29             padding: 20px;
30             overflow: scroll;
31             height: 100%;
32             width: 300px;
33             font-size: 20px;
34         }
35     </style>
36 </head>
37 <body>
38     <aside>
39         <ul id="list"></ul>
40     </aside>
41     <article>
42         <p id="content"></p>
43     </article>
44 </body>
45 <script src="data.js"></script>
46 <script>
47     (function(){
48         var listElement=document.querySelector(`#list`);
49         for(var title in data){
50             var liElement=document.createElement(`li`);
51             liElement.innerHTML=title;
52             liElement.setAttribute(`data-title`,title);//自定義屬性
53             listElement.appendChild(liElement);
54         }
55         var liElements=document.querySelectorAll(`#list>li`);
56         var content=document.querySelector(`#content`);
57         //註冊每一個元素事件
58         for(var i=0;i<liElements.length;i++){
59             liElements[i].addEventListener(`click`,function(){
60                 //拿到被點選元素的名字 title
61                 var title=this.dataset[`title`];//通過dataset獲取
62                 content.innerHTML=data[title];//賦值
63                 //操作歷史記錄
64                 if(window.history&&history.pushState){
65                     //新增一個新的歷史記錄
66                    history.pushState(title,`title沒有任何瀏覽器支援`,`?t=`+title);
67                 }else{
68                     console.log(`不支援`);
69                 }
70             });
71         }
72         //當我們在偽造訪問歷史中前進或後退時會執行一個popstate事件
73         window.addEventListener(`popstate`,function(e){
74             content.innerHTML=data[e.state];
75         });
76         //window.location="http://www.baidu.com";
77         //第一次請求過來 獲取位址列中的t引數
78         var title=window.location.search.split(`=`)[1];//用=分割
79         if(title){//有值
80             console.log(decodeURI(title));//decodeURI 從URL編碼轉換到之前的狀態
81             content.innerHTML=data[decodeURI(title)];
82         }
83     })();
84 </script>
85 </html>

二、全屏顯示 API

requestFullScreen();全屏顯示方法

 1 <script>
 2     (function(){
　　　　　　//點選圖片讓網頁全屏顯示
 3         var img=document.querySelector(`#img_full`);
 4         img.addEventListener(`click`,function(e){
 5             if(document.body.webkitRequestFullScreen){//谷歌
 6                 document.body.webkitRequestFullScreen();
 7             }else if(document.body.mozRequestFullScreen){//火狐
 8                 document.body.mozRequestFullScreen();
 9             }else{
10                 document.body.requestFullScreen();//其他
11                 e.preventDefault();
12             }
13 
14         });
15         //點選h3標籤，讓p標籤裡的內容全屏展示
16         var h3=document.querySelector(`#title_1`);
17         var p=document.querySelector(`#content_1`);
18         h3.addEventListener(`click`,function(e){
19             if(p.webkitRequestFullScreen){
20                 p.webkitRequestFullScreen();
21             }
22         })
23     })()
24 
25 </script>

三、網頁儲存

  1. Application Cache 讓網頁離線訪問的技術
  2. getItem方式獲取一個不存在的鍵 ，返回空字串    
    txtValue.value = localStorage.getItem(`key1`);
  3. []方法 返回undefined   
    txtValue.value = localStorage[`key1`];
 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <title>Web Storage</title>
 7   <meta name="author" content="汪磊">
 8 </head>
 9 
10 <body>
11   <div>
12     <textarea id="txt_value" cols="80" rows="10"></textarea>
13   </div>
14   <button id="btn_set">儲存</button>
15   <button id="btn_get">讀取</button>
16   <script>
17     if (!window.localStorage) {
18       alert(`不支援LocalStorage`);
19     } else {
20       var btnSet = document.querySelector(`#btn_set`);//獲取按鈕
21       var btnGet = document.querySelector(`#btn_get`);
22       var txtValue = document.querySelector(`#txt_value`);
23       btnGet.addEventListener(`click`, function() {
24         // txtValue.value = localStorage.getItem(`key1`);
25         txtValue.value = localStorage[`key1`];//會話用sessionStorage
26       });
27       btnSet.addEventListener(`click`, function() {
28         // localStorage.setItem(`key1`, txtValue.value);
29         localStorage[`key1`] = txtValue.value;
30       });
31     }
32   </script>
33 </body>
34 
35 </html>

 


相關文章