【HTML】合体篇

🍈作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🍇个人主页：亦世凡华、的博客

🍓系列专栏：HTML专栏

🥝给大家推荐一个网站🥥很实用🍌我一直在上面刷题：点击跳转进入网站注册登录即可刷题

引言

🥑上文讲解了HTML多媒体标签，今天继续学习。

HTML地理定位

地理定位：HTML5 Geolocation API 用于获得用户的地理位置，鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

浏览器支持：Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位；对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。（了解即可）代码如下：

<body onload="init()">
    <div id="map" style="width:400px; height: 400px;">
    </div>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script>
        // 获取当前的地理位置
        function init () {
            navigator.geolocation.getCurrentPosition(function (position) {
                var coords = position.coords;
                // 设定地图参数，将用户当前的地理的经纬度设为地图中心点
                var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
                var myOptions = {
                    center: latlng,
                    mapTypeID: google.maps.MapTypeID.ROADMAP
                };
                // 创建地图并“map” div中显示
                var map1;
                map1 = new google.maps.Map(document.getElementById("map"), myOptions);
                // 在地图上创建标记
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map1
                });
                // 设定标准窗口，并指定该窗口的注释文字
                var infowindow = new google.maps.InfoWindow({
                    content: '当前位置'
                });
                infowindow.open(map1, marker)
            })
        }
    </script>
</body>

使用谷歌地图，访问比较缓慢。

HTMLWeb存储

HTML5提供了两种在客户端存储数据的新方法：

localStorage -没有时间限制的数据存储，关闭浏览器数据还在

sessionStorage -针对一个session的数据存储，关闭浏览器数据会删除。

之前，这些都是由cookie完成的。但是cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

我们先实现一个案例，给网页一个输入框，点击保存按钮会出现弹框效果，代码如下：

<body>
    <textarea style="width:100px; height:100px" id="ta"></textarea>
    <button id="btn">save</button>
    <script>
        window.onload = function(){
            ta = document.getElementById("ta");
            btn = document.getElementById("btn");
            btn.onclick = function(){
                alert(ta.value)
            }
        }
    </script>
</body>

看不懂JS代码的人可以去看一下我的 JS专栏以及 JQ专栏这里简单提一下，获取HTML的DOM元素，然后给按钮赋予一个点击事件，很简单。接下来使用 localStorage 进行存储，代码如下，如果这个text有内容，点击按钮就保存。

<script>
    window.onload = function(){
        ta = document.getElementById("ta");
        if(localStorage.text){
            ta.value = localStorage.text
        }
        btn = document.getElementById("btn");
        btn.onclick = function(){
            // alert(ta.value)
            localStorage.text = ta.value;
        }
    }
</script>

保存之后内容就存储在本地存储空间中，即使你关闭浏览器，再次访问这个页面的时候这个值还在

接下来通过数字累加举例说明 sessionStorage 存储方式

<body>
    <span id="span">0</span>
    <button id="btn">按钮</button>
    <script>
        var num = 0;
        var span;
        var btn;
        window.onload = function(){
            span = document.getElementById("span");
            btn = document.getElementById("btn");
            if(sessionStorage.num){
                num = sessionStorage.num;
            }else{
                num = 0;
            }

            btn.onclick = function() {
                num++;
                sessionStorage.num = num;
                showNum();
            }
            function showNum(){
                span.innerHTML = num;
            }
        }
    </script>
</body>

我们可以看到当我们点击按钮是num是累加的，并通过 sessionStorage 存储下来。