第89天：HTML5中访问历史、全屏和网页存储API

半指温柔乐

发布于 2018-09-11 11:16:57

1.1K0

发布于 2018-09-11 11:16:57

文章被收录于专栏：前端知识分享

一、访问历史 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>

三、网页存储

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017-11-19 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度