javascript中本地储存、离线缓存、地理定位、网络状态

苦海123

已于 2024-03-19 23:05:22 修改

阅读量381

点赞数 1

分类专栏： javascript 文章标签： javascript 前端

于 2021-04-27 07:14:23 首次发布

本文链接：https://blog.csdn.net/weixin_46758988/article/details/116186669

版权

javascript 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

本地储存：

实际开发中某些内容是不需要放到服务器中，而是放到了浏览器中，需要的时候可以快速的访问，甚至页面刷新也可能不会丢失数据，容量较大；这里介绍两种数据存储方式：sessionStorage约5M大小、localStorage约20M大小。其缺点是只能储存字符串，因此要使用JSON.stringify()编译后储存。

1.window.sessionStrage：关闭浏览器窗口为一个生命周期，在同一个页面下任何地方可以访问此数据，以键值对的方式存储数据。sessionStorage.setItem(key,value)存储数据；sessionStorage.getItem(key)获取某个键的值；sessionStorage.removeItem(key)移除某个键和值；sessionStorage.clear()清空所有的键值对，如：

	<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="text" placeholder='输入key'>
        <input type="text" placeholder='输入value'>
        <input type="button" value='储存'>
        <input type="button" value='删除'>
        <input type="button" value='清空'>
        <p></p>
    </body>
    <script>
        var inputs = document.querySelectorAll('input');
        var p = document.querySelector('p');
    
        function getvalue() {
            p.innerHTML = sessionStorage.getItem(inputs[0].value);
        };
    
        inputs[2].addEventListener('click', function() {
            sessionStorage.setItem(inputs[0].value, inputs[1].value);
            getvalue();
        });
        inputs[3].addEventListener('click', function() {
            sessionStorage.removeItem(inputs[0].value);
        });
        inputs[4].addEventListener('click', function() {
            sessionStorage.clear();
        });
    </script>
    </html>

2.window.localStorage:生命周期永久（除非手动删除），可以在多个页面使用（同一浏览器下），以键值对形式储存，localStorage.setItem(key,value)存储数据；localStorage.getItem(key)获取某个键的值；localStorage.removeItem(key)移除某个键和值；localStorage.clear()清空所有的键值对，如：

	<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="text" placeholder='输入key'>
        <input type="text" placeholder='输入value'>
        <input type="button" value='储存'>
        <input type="button" value='删除'>
        <input type="button" value='清空'>
        <p></p>
    </body>
    <script>
        var inputs = document.querySelectorAll('input');
        var p = document.querySelector('p');
    
        function getvalue() {
            p.innerHTML = localStorage.getItem(inputs[0].value);
        };
    
        inputs[2].addEventListener('click', function() {
            localStorage.setItem(inputs[0].value, inputs[1].value);
            getvalue();
        });
        inputs[3].addEventListener('click', function() {
            localStorage.removeItem(inputs[0].value);
        });
        inputs[4].addEventListener('click', function() {
            localStorage.clear();
        });
    </script>
    </html>

离线缓存：

在html5中可以构建一个离线应用，其方法是创建一个cache manifest文件即可。其作用是将需要无网络情况加载的资源缓存下来供离线使用，同时提升访问速度来增加用户体验，减少请求提高性能。

缓存清单：一个以.appcache为后缀名的文件，用来配置缓存资源的，其文件格式如下：

1.顶行输入： CACHE MANIFEST

2.CACHE：此命令输入后换行配置需要缓存的静态资源，如图片，代码文件等，此命令可以省略，但是需要将资源写在CACHE MANIFEST，同时可以指定多个CACHE。

3.NETWORK：此命令输入后换行配置需要在线访问的资源。

4.FALLBACK：此命令输入后换行配置当缓存的文件找不到时备用的资源。

	CACHE MANIFEST
    
    #下面是配置需要缓存的资源：
    CACHE:
    ./images/1.jpg
    ./images/3.jpg
    ./images/4.jpg
    ./images/5.jpg
    
    #下面是配置需要网络才可以加载的资源：
    NETWORK:
    ./images/1.jpg
    ./images/3.jpg
    
    #下面是当资源请求失败时需要替换的资源，前面是原资源 空格 需要替换的资源
    FALLBACK:
    ./images/1.PNG ./images/2.PNG

引入appcache文件：将appcache文件通过html标签配置到文件：

	<html  manifest="appcache文件的URL"></html>

调试是否配置成功：chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存；在appache文件中#表示注释，当appache文件内容发生改变或手动清除时，才会重新缓存。

geolocation地理定位：

在html5中增加了获取地理定位的API，即基于位置的服务（Location Base Service）,由于国内政策的影响，geolocation在使用的过程中会发生网络阻塞，这个是无法避免的；

geolocation是navigator导航的一个属性，若想要获取定位，那么就得通过navigator调用geolocation属性，geolocation属性下面有两个方法：getCurrentPosition()一次获取当前定位信息、watchPositionget(callback,callback)重复获取定位信息；

这两个方法都可以传相同的三个参数，前两个是回调函数作为参数，第一个回调函数表示获取定位信息成功，第二个回调函数表示获取地理位置失败，第三个参数是一个可选的对象{timeout:10000,enableHighAccuracy:false,maximumAge:0}，timeout设置请求超时时间，enableHighAccuracy浏览器获取高精度的位置，maximumAge在重复获取地理位置是允许多久重新获取一次，一般情况下都是不用考虑的。

注意：使用 watchPosition，浏览器多次调用请求成功的回调函数以便传递最新的位置。该函数返回一个watchID值，使用navigator.geolocation.clearWatch(watchId值)可以清除此次回调，使用不带参数的navigator.geolocation.clearWatch()清除所有watchPosition回调

	<script>
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    // 获取定位成功后执行的回调函数：参数position为定位信息对象，其属性coords为坐标，coords有两个属性用来获取经纬度：
                    var latitude = position.coords.latitude; //维度
                    var longitude = position.coords.longitude; //经度
                    var accuracy = position.coords.accuracy; //精确度
                    var altitude = position.coords.altitude; //高度
                    var altitudeAccuracy = position.coords.altitudeAccuracy; //高度的精确度
                  	var heading = position.coords.heading; //相对于正北方运动的方向
                  	var speed = position.coords.speed; //运动的速度
                  
                    // 可以在下面调用定位运营商API，即下一节内容：
    
                }, function(err) {
                    // 获取定位失败后执行的回调函数：
                    switch (err.code) {
                        case err.PERMISSION_DENIED:
                            alert("获取定位请求被拒绝");
                            break;
                        case err.POSITION_UNAVAILABLE:
                            alert("无法获取当前位置");
                            break;
                        case err.TIMEOUT:
                            alert("请求地理位置超时");
                            break;
                        case err.UNKNOWN_ERROR:
                            alert("未知错误");
                            break;
                    };
                });
            }
        </script>

在百度地图上显示定位：

通过上面的方法只能获取到当前位置的定位，若要想在某地图上面显示，还需要对某地图进行配置，这里介绍百度地图，如：

	<script src="http://api.map.baidu.com/api?v=2.0&ak=	0A5bc3c4fb543c8f9bc54b77bc155724"></script><!-- 引入百度地图javascript API -->
    <script>
        var map = new BMap.Map("container"); // 创建百度地图对象，里面的参数表示把此地图创建到哪个容器
    
        var point = new BMap.Point(116.225350, 40.16999); // 创建百度地图上面的目标对象，并把经度纬度传给此对象
    
        map.centerAndZoom(point, 10); //默认的比例，地图的比例
    
        map.enableScrollWheelZoom(); //添加鼠标滚动缩放
    
        // 以上代码可以实现地图定位效果，但是为了更清晰和实用可以添加一个图标在目标位置、点击获取点击处经纬度
    
        var Icon = new BMap.Icon("1.png", new BMap.Size(128, 128)); // 定义一个图标
    
        var markers = new BMap.Marker(point, { // 将图标定位到目标位置
            icon: Icon
        });
        map.addOverlay(markers);
    
        //点击地图打印坐标：
        map.addEventListener("click", function(e) {
            // console.log(e);//这里的参数e是一个对象，里面包含很多相关属性和方法
            console.log("经度坐标：" + e.point.lng + " 纬度坐标：" + e.point.lat);
        });
    </script>

文件读取：

通过input输入框type属性为file的input输入框可以拿到文件，此时需要通过变量接收这个文件，之后通过onchange事件触发事件处理函数，事件处理函数中国可以new FileReader()实例化一个文件对象，其方法readAsDataURL()为加载文件，括号里面传入的是文件，如下案例：

	<script>
        var img = document.querySelector('img');
        var inputs = document.querySelector('input');
        // 当选择框有文件被选中时触发事件函数：
        inputs.onchange = function() {
            var files = new FileReader(); //创建一个文件对象
            // 给这个对象传入一个文件：
            files.readAsDataURL(this.files[0]); //这里this指files这个对象，files属性是所有拿到的文件，通过下标可以拿到具体的文件
            // 当文件加载完成时执行的函数：
            files.onload = function() {
                img.src = this.result; //this.result是一个读取完成后的base64位的数据
            };
        };
    </script>

网络状态：

window.navigator.onLine可以返回一个布尔值表示当前网络的状态；window有两个关于网络的事件：online表示在线，offline表示离线，这两个事件监听的是网线连接或断开的状态。

	<script>
        console.log(window.navigator.onLine);//true,以布尔值的方式表示网络状态，true表示联网，false表示断网
        window.online = function() {
            console.log('在线')
        };
        window.offline = function() {
            console.log('离线')
        };
    </script>

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海

苦海123

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript中本地储存、离线缓存、地理定位、网络状态

本地储存：实际开发中某些内容是不需要放到服务器中，而是放到了浏览器中，需要的时候可以快速的访问，甚至页面刷新也可能不会丢失数据，容量较大；这里介绍两种数据存储方式：sessionStorage约5M大小、localStorage约20M大小。其缺点是只能储存字符串，因此要使用JSON.stringify()编译后储存。1.window.sessionStrage：关闭浏览器窗口为一个生命周期，在同一个页面下任何地方可以访问此数据，以键值对的方式存储数据。sessionStorage.setItem(ke
复制链接

扫一扫