第89天：HTML5中访问历史、全屏和网页存储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对象

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>history API</title>

     <style>

         html,body{

             height: 100%;

             overflow: hidden;

             margin: 0;

             padding: 0;

         }

         aside{

             background-color: #c0c0c0;

             width: 220px;

             float: left;

             height: 100%;

         }

         aside ul{

             font-size: 20px;

             line-height: 2;

         }

         aside ul li{

             cursor: pointer;

         }

         article{

             background-color: #f5f5f5;

             margin-left: 220px;

             padding: 20px;

             overflow: scroll;

             height: 100%;

             width: 300px;

             font-size: 20px;

         }

     </style>

 </head>

 <body>

     <aside>

         <ul id="list"></ul>

     </aside>

     <article>

         <p id="content"></p>

     </article>

 </body>

 <script src="data.js"></script>

 <script>

     (function(){

         var listElement=document.querySelector('#list');

         for(var title in data){

             var liElement=document.createElement('li');

             liElement.innerHTML=title;

             liElement.setAttribute('data-title',title);//自定义属性

             listElement.appendChild(liElement);

         }

         var liElements=document.querySelectorAll('#list>li');

         var content=document.querySelector('#content');

         //注册每一个元素事件

         for(var i=0;i<liElements.length;i++){

             liElements[i].addEventListener('click',function(){

                 //拿到被点击元素的名字 title

                 var title=this.dataset['title'];//通过dataset获取

                 content.innerHTML=data[title];//赋值

                 //操作历史记录

                 if(window.history&&history.pushState){

                     //添加一个新的历史记录

                    history.pushState(title,'title没有任何浏览器支持','?t='+title);

                 }else{

                     console.log('不支持');

                 }

             });

         }

         //当我们在伪造访问历史中前进或后退时会执行一个popstate事件

         window.addEventListener('popstate',function(e){

             content.innerHTML=data[e.state];

         });

         //window.location="http://www.baidu.com";

         //第一次请求过来 获取地址栏中的t参数

         var title=window.location.search.split('=')[1];//用=分割

         if(title){//有值

             console.log(decodeURI(title));//decodeURI 从URL编码转换到之前的状态

             content.innerHTML=data[decodeURI(title)];

         }

     })();

 </script>

 </html>

二、全屏显示 API

requestFullScreen();全屏显示方法

 <script>

     (function(){
　　　　　　//点击图片让网页全屏显示

         var img=document.querySelector('#img_full');

         img.addEventListener('click',function(e){

             if(document.body.webkitRequestFullScreen){//谷歌

                 document.body.webkitRequestFullScreen();

             }else if(document.body.mozRequestFullScreen){//火狐

                 document.body.mozRequestFullScreen();

             }else{

                 document.body.requestFullScreen();//其他

                 e.preventDefault();

             }

         });

         //点击h3标签，让p标签里的内容全屏展示

         var h3=document.querySelector('#title_1');

         var p=document.querySelector('#content_1');

         h3.addEventListener('click',function(e){

             if(p.webkitRequestFullScreen){

                 p.webkitRequestFullScreen();

             }

         })

     })()

 </script>

三、网页存储

Application Cache 让网页离线访问的技术
getItem方式获取一个不存在的键，返回空字符串
```
txtValue.value = localStorage.getItem('key1');
```
[]方法返回undefined
```
txtValue.value = localStorage['key1'];
```

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

   <meta charset="UTF-8">

   <title>Web Storage</title>

   <meta name="author" content="汪磊">

 </head>

 <body>

   <div>

     <textarea id="txt_value" cols="80" rows="10"></textarea>

   </div>

   <button id="btn_set">存储</button>

   <button id="btn_get">读取</button>

   <script>

     if (!window.localStorage) {

       alert('不支持LocalStorage');

     } else {

       var btnSet = document.querySelector('#btn_set');//获取按钮

       var btnGet = document.querySelector('#btn_get');

       var txtValue = document.querySelector('#txt_value');

       btnGet.addEventListener('click', function() {

         // txtValue.value = localStorage.getItem('key1');

         txtValue.value = localStorage['key1'];//会话用sessionStorage

       });

       btnSet.addEventListener('click', function() {

         // localStorage.setItem('key1', txtValue.value);

         localStorage['key1'] = txtValue.value;

       });

     }

   </script>

 </body>

 </html>