Html5API（二）（WebStorage、拖拽、跨文档通信、websocket、获取地理位置）

系列文章目录

关联文章：Html5API（自定义属性、媒体元素、canvas画布）（一）

---

---

一、Web存储

Web存储分为cookie和WebStorage,WebStorage又分为sessionStorage和localStorage

1.cookie（不属于h5新增）

特点： 产生于服务器端,保存在客户端，同一服务器下得cookie共享的,不同服务器的cookie不共享，传输数据最大为4kb，发送请求时自动携带cookie中的数据，如果不设置过期时间默认在会话关闭时清除cookie。
在前端我们通常通过js-cookie这个库来操作cookie

<!-- 引入js-cookie的库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.1/js.cookie.js"></script>

使用案例：

 		// 设置Cookie set参数 ：key value 设置过期事件
        Cookies.set('status', '1', {
            expires: 7
        })
         // 获取Cookie get参数：键名、属性名
        console.log(Cookies.get('status'))
		
		 // 移除cookie remove参数：属性名
        Cookies.remove('status')

运行结果：
remove前：


remove后：

2.WebStorage

（1）sessionStorage（会话存储）

特点：针对于选项卡 选项卡关闭或者浏览器关闭 会话失效 传输数据可以达到5M，产生于客户端，发送请求时不携带sessionStorage中的数据，
使用案例：

  // 设置会话存储
        sessionStorage.setItem('name', 'terry');
        sessionStorage.setItem('age', '12');

        // 获取会话存储
        console.log(sessionStorage.getItem('name'));
        // 清除会话
        // sessionStorage.removeItem('name');
        // 清除全部的会话存储
        // sessionStorage.clear();

运行结果：

（2）localStorage（本地存储）

特点： 本地存储,将数据存到本地磁盘中 ，即使选项卡关闭或者浏览器关闭 ，数据依旧存在，除非手动删除。 传输数据可以达到5M。发送请求时不自动携带。

使用案例：

  // 设置本地存储
        localStorage.setItem('name', 'lh');
        localStorage.setItem('age', '12');
        // 获取本地存储
        console.log(localStorage.getItem('age'))
            // 移除本地存储
        //localStorage.removeItem('name');
        //localStorage.clear()

运行结果：

3.总结:Cookie、sessionStorage、localStorag的区别

共同点：
• 数据存储位置： 他们都是存储在客户端的。

区别：
• 生命周期: cookie的生命周期是服务器端写入时就设置好的，如果不设置默认会在浏览器回话结束时清除。localStorage是一直存在的，除非手动清除。sessionStorage是页面关闭就自动清除的，
• 存储大小: cookie的存储大小大概为4kb，localStorage的存储大小一般为5M。
• 写入方式: cookie产生于服务器端,保存在客户端，sessionStorage和localStorage是由客户端写入的。
• 数据共享: cookie、sessionStorage、localStorage都遵循同源原则，sessionStorage还要限制必须是同一个页面。
• 发送请求时是否携带: 前向后端发送数据时自动携带cookie中的数据，sessionStorage和localStorage中的不携带。
• 应用场景 : cookie是用于存储验证用户登录信息的token，localStorage用于存储不易变更的数据，减轻服务器负担，sessionStorage可以用来检测用户是否刷新进入页面，如音乐播放器恢复播放进度条的功能。

二、拖放API

在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽可以传递数据

拖放元素： 设置当前元素可拖放 draggable=‘true’；使用拖拽事件；
放置元素： 默认是不可放置的，需要设置取消默认行为 event.preventDefault(); 使用放置事件；
拖放事件： dragsatrt(开始拖拽) drag(正在拖拽) dragend(拖拽结束)
放置事件： dragenter(进入放置元素) dragover(在放置元素内移动) drop(放入放置元素)
传输数据: 开始拖放事件时使用event.dataTransfer.setData();
获取数据: 放置事件drop时使用event.dataTransfer.getData();
拖拽事件流: dragstart->drag->dragenter->dragover->drop->drapend

使用案例：

    <style>
        .parent {
            height: 100px;
            border: 2px solid brown;
        }
        
        .child {
            width: 50px;
            height: 50px;
            background-color: rgb(138, 84, 88);
            color: aliceblue;
            float: left;
            margin: 10px 0 0 10px;
        }
        
        body {
            height: 400px;
        }
    </style>
    <script>
        window.onload = function() {
            // 获取parent和child
            var parent = document.querySelector('.parent');
            var childs = document.querySelectorAll('.child');

            childs = Array.from(childs);
            childs.forEach(function(item) {
                // 拖动事件
                // 开始拖动 on事件类型
                item.ondragstart = function(event) {
                    console.log('ondragstart开始拖动');
                    // console.log(event, '事件对象')
                    // 将拖动元素的id传出去
                    // dataTransfer.setData 传输数据 key value
                    event.dataTransfer.setData('id', item.id)
                };
                // 正在拖动
                item.ondrag = function() {
                    console.log('ondrop正在拖动')
                };
                // 拖动结束
                item.ondragend = function() {
                    console.log('ondragend结束拖动')
                }
            })

            // 放置事件 --放置元素 parent
            // 进入放置元素
            parent.ondragenter = function() {
                console.log('ondragenter进入放置元素')
            };
            // 正在放置元素内移动
            parent.ondragover = function(event) {
                console.log('ondragover正在放置元素内移动');
                // 将放置元素设置为可放置，清除默认事件
                event.preventDefault()
                    // 阻止事件冒泡
                event.stopPropagation()
            };
            // 放置节点到放置元素
            parent.ondrop = function(event) {
                // 获取拖动元素的传输数据getData(key)
                var id = event.dataTransfer.getData('id')
                console.log('ondrop将拖动元素放置到放置元素')
                this.appendChild(document.querySelector('#' + id))
                    // 阻止事件冒泡
                event.stopPropagation()
            };

            // 将拖动元素放置到body
            document.body.ondragover = function(event) {
                console.log('ondragover正在放置元素内移动');
                // 将放置元素设置为可放置，清除默认事件
                event.preventDefault()

            };
            // 放置节点到body
            document.body.ondrop = function(event) {
                // 获取拖动元素的传输数据getData(key)
                var id = event.dataTransfer.getData('id')
                console.log('ondrop将拖动元素放置到放置元素')
                this.appendChild(document.querySelector('#' + id))
            }
        }
    </script>
</head>

<body>
    <!-- 放置元素parent 放置事件：dragenter进入放置元素 dragover放置元素里移动 drop-->
    <!-- 拖动元素：child 拖动事件：dragstart拖动开始 drag正在拖动 dragend拖动结束-->

    <div class="parent"></div>
    <!-- 设置当前元素可拖拽 draggable设置当前元素是否可拖拽-->
    <div class="child" id="one" draggable="true">1</div>
    <div class="child" id="two" draggable="true">2</div>
    <div class="child" id="three" draggable="true">3</div>
    <div class="child" id="four" draggable="true">4</div>

</body>

运行结果：

拖拽运行结果

三、跨文档通信

H5提供了网页文档之间互相接收与发送消息的功能。当在a页面中通过window.open方法打开b页面，或者在a页面中通过iframe嵌套b页面，我们想让a中的数据传递到b中就可以使用跨文档消息传输

1.通过window.open打开b页面，发送信息
A页面

<script>
        window.onload = function() {
            var btn1 = document.querySelector('button');
            var btn2 = document.getElementsByTagName('button')[1];
  
            // 给按钮绑定点击事件
            btn1.onclick = function() {
                // 返回打开页面的窗口对象
                win = window.open('./B1页面.html')
            }

            btn2.onclick = function() {
                    // 发送数据 参数：要发送数据 发送到哪一个地址 *
                    win.postMessage('hello', 'http://127.0.0.1:5500')
                    win.postMessage('hello', '*')

                }
   
        }
    </script>
</head>

<body>
 
    <button>打开B1页面</button>
    <button>发送数据</button>  
</body>

B页面

 <script>
        window.onmessage = function(event) {
            // 接收数据
            console.log(event.data);
            // 地址来源
            console.log(event.origin);
        }
    </script>

运行结果：

2.通过内联框架

    <script>
        window.onload = function() {
            var btn1 = document.getElementsByTagName('button')[0];
            var btn2 = document.getElementsByTagName('button')[1];

            btn1.onclick = function() {
                    // 发送数据 参数：要发送数据 发送到哪一个地址 *
                    win.postMessage('hello', 'http://127.0.0.1:5500')
                    win.postMessage('hello', '*')

                }
                // 获取内联框架窗口
            btn2.onclick = function() {
                // 获取内联框架窗口=>B1页面
                win = document.querySelector('iframe').contentWindow;
            }
        }
    </script>
</head>

<body>
    <button>发送数据</button>
    <button>使用内联框架发送数据</button>
    <iframe src="./B1页面.html" frameborder="0"></iframe>
</body>

B页面

 <script>
        window.onmessage = function(event) {
            // 接收数据
            console.log(event.data);
            // 地址来源
            console.log(event.origin);
        }
    </script>

运行结果：

四、websocket

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。

使用websocket可以在服务器与客户端之间建立一个非HTTP的双向连接，这个连接是实时的也是永久的，除非被显示关闭。·服务器可以随时将消息推送到客户端。·

  <script>
        // 1.创建一个websocket对象
        var socket = new WebSocket('ws://121.199.0.35:8888/imserver/1');
        // 2.接收服务器的消息推送
        socket.onmessage = function(event) {
            console.log(event.data)
        };
        // 3.监听websocket和服务器连接成功的监听事件
        socket.onopen = function() {
            console.log('websocket和服务器连接成功');
            socket.send('发送给服务器的数据');
        };
        // 4.websocket和服务器连接关闭的监听
        socket.close = function() {
            console.log("连接关闭")
        };

        setTimeout(() => {
            socket.close()
        }, 5000);
    </script>

五、获取地理位置

H5中添加了获取地理位置的api, window.navigator.geolocation.getCurrentPosition。它也是百度地图/高德地图通过浏览器定位的实现原理。

  window.navigator.geolocation.getCurrentPosition(function(position) {
            console.log(position)
        })