【上海校区】HTML5-API 网络状态,地理位置,web存储

一.网络状态       

      在移动端，我们经常需要检测设置是在线还是离线，HTML5为此定义了一个navigator.onLine属性，这个属性用于检测设备是否联网。navigator.onLine 在不同浏览器中有细微的差别。


    1.网络状态
          navigator.onLine返回用户当前的网络状况，是一个布尔值
         1. 如果浏览器连不上网(包括局域网)，就是离线状态，也就是脱机状态，会返回false   

         2. 否则就是在线状态，返回true

注意：返回true不一定就是说一定能访问互联网，因为有可能连接的是局域网。但是返回false则表示一定连不上网。

    2.监听网络变化

         为了更好的确定网络是否连接，HTML5还定义了两个事件，用于监听网络状态的变化。
         //网络连接时会被调用
         window.addEventListener("online", function () {

             alert("online");});

         //网络断开时会被调用

         window.addEventListener("offline", function () {

    alert("offline");});

二.地理位置

在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务LBS(Location Base Service)

1.隐私
     HTML5规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。在获取地理位置之前，会询问用户，只有在获得许可之后，才能获取到用户的位置信息。
    2.相关的方法     

[JavaScript] 纯文本查看 复制代码

//successCallback:获取成功后会调用,并返回一个position对象，里面包含了地理位置信息
[/i][/size][/font][/color]//获取失败了会调用，并返回error对象，里面包含了错误信息。
//获取当前的地理位置信息
navigator.geolocation.getCurrentPosition(successCallback, errorCallback)
//重复的获取当前的地理位置信息
navigator.geolocation.watchPosition(successCallback, errorCallback)
实例：

navigator.geolocation.getCurrentPosition(function(position){
    // 定位成功会调用该方法
    // position.coords.latitude 纬度
    // position.coords.longitude 经度
    // position.coords.accuracy 精度
    // position.coords.altitude 海拔高度
}, function(error){
    // 定位失败会调用该方法
    // error 是错误信息
});

    在iOS 10中，苹果对webkit定位权限进行了修改，所有定位请求的页面必须是https协议的。

    3.百度地图
      仅仅获取到经纬度对于用户来说意义并不大，因为用户也不知道经度和纬度表示的是地球上的哪一个地方，因为我们可以结合百度地图，准确的将用户的位置显示出来。

     百度地图官网：http://lbsyun.baidu.com/

      1. 在开发中，找到javascript API   

      2. 直接查看示例demo   

      3. 复制相应的代码，替换掉秘钥就行，秘钥只需创建一个新的应用就可以了。

三.web存储

    在代码执行的时候，数据都是存储在内存中的，当页面关闭或者浏览器关闭的时候，内存就被释放掉了。数据只有存储在硬盘上，才不会被释放。

[JavaScript] 纯文本查看 复制代码

//存储在内存中，会被释放
    var str = "hello world";
    console.log(str);
​
    //存储在硬盘上，不会被释放
    localStorage.setItem("name", "张三");
    console.log(localStorage.getItem("name"));

   1.cookie(了解)
    传统方式，我们以document.cookie进行存储，但是存储起来特别麻烦，并且，存储大小只有4k，常用来做自动登录，即存储用户的账号和密码信息。每次请求都会带上cookie

   【02-cookie存储.html】cookie是以字符串形式存在的，这个字符串有固定的格式：key=value;key1=value1;

   在获取cookie内容时，一般需要通过正则或者字符串的方法进行处理，转换成对象，最终得到数据。

   document.cookie = "name=zhangsan";

   document.cookie = "age=18";

   document.cookie = "sex=23";

​

   //读取cookie

   var result = document.cookie;

   console.log(result);

   使用原生js操作cookie太过麻烦，尤其是cookie的获取和删除操作，使用jquery.cookie插件，能够简化我们的操作。

   【03-cookie存储（jquery插件）.html】

   //设置cookie

   $.cookie("name", "zs");

   //获取cookie

   console.log($.cookie("name"));

   //删除cookie

   $.removeCookie("name");

   2.sessionStorage与localStorage

    HTML5规范提出了解决方案，使用sessionStorage和localStorage存储数据。设置、读取、删除操作很方便

    window.sessionStorage的特点

    1. 声明周期为关闭浏览器窗口

    2. 不能在多个窗口下共享数据。

    3. 大小为5M

    window.localStorage的特点

    1. 永久生效，除非手动删除

    2. 可以多个窗口共享

    3. 大小为20M   

    window.sessionStorage与window.localStorage的方法

    setItem(key, value) //设置存储内容

    getItem(key) //读取存储内容

    removeItem(key) //删除键值为key的存储内容

    clear() //清空所有存储内容

    key(n) //以索引值来获取存储内容

【上海校区】HTML5-API 网络状态,地理位置,web存储

一.网络状态       

      在移动端，我们经常需要检测设置是在线还是离线，HTML5为此定义了一个navigator.onLine属性，这个属性用于检测设备是否联网。navigator.onLine 在不同浏览器中有细微的差别。


    1.网络状态
          navigator.onLine返回用户当前的网络状况，是一个布尔值
         1. 如果浏览器连不上网(包括局域网)，就是离线状态，也就是脱机状态，会返回false   

         2. 否则就是在线状态，返回true

注意：返回true不一定就是说一定能访问互联网，因为有可能连接的是局域网。但是返回false则表示一定连不上网。

    2.监听网络变化

         为了更好的确定网络是否连接，HTML5还定义了两个事件，用于监听网络状态的变化。
         //网络连接时会被调用
         window.addEventListener("online", function () {

             alert("online");});

         //网络断开时会被调用

         window.addEventListener("offline", function () {

    alert("offline");});

二.地理位置

在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务LBS(Location Base Service)

1.隐私
     HTML5规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。在获取地理位置之前，会询问用户，只有在获得许可之后，才能获取到用户的位置信息。
    2.相关的方法     

[JavaScript] 纯文本查看 复制代码

//successCallback:获取成功后会调用,并返回一个position对象，里面包含了地理位置信息
[/i][/size][/font][/color]//获取失败了会调用，并返回error对象，里面包含了错误信息。
//获取当前的地理位置信息
navigator.geolocation.getCurrentPosition(successCallback, errorCallback)
//重复的获取当前的地理位置信息
navigator.geolocation.watchPosition(successCallback, errorCallback)
实例：

navigator.geolocation.getCurrentPosition(function(position){
    // 定位成功会调用该方法
    // position.coords.latitude 纬度
    // position.coords.longitude 经度
    // position.coords.accuracy 精度
    // position.coords.altitude 海拔高度
}, function(error){
    // 定位失败会调用该方法
    // error 是错误信息
});

    在iOS 10中，苹果对webkit定位权限进行了修改，所有定位请求的页面必须是https协议的。

    3.百度地图
      仅仅获取到经纬度对于用户来说意义并不大，因为用户也不知道经度和纬度表示的是地球上的哪一个地方，因为我们可以结合百度地图，准确的将用户的位置显示出来。

     百度地图官网：http://lbsyun.baidu.com/

      1. 在开发中，找到javascript API   

      2. 直接查看示例demo   

      3. 复制相应的代码，替换掉秘钥就行，秘钥只需创建一个新的应用就可以了。

三.web存储

    在代码执行的时候，数据都是存储在内存中的，当页面关闭或者浏览器关闭的时候，内存就被释放掉了。数据只有存储在硬盘上，才不会被释放。

[JavaScript] 纯文本查看 复制代码

//存储在内存中，会被释放
    var str = "hello world";
    console.log(str);
​
    //存储在硬盘上，不会被释放
    localStorage.setItem("name", "张三");
    console.log(localStorage.getItem("name"));

   1.cookie(了解)
    传统方式，我们以document.cookie进行存储，但是存储起来特别麻烦，并且，存储大小只有4k，常用来做自动登录，即存储用户的账号和密码信息。每次请求都会带上cookie

   【02-cookie存储.html】cookie是以字符串形式存在的，这个字符串有固定的格式：key=value;key1=value1;

   在获取cookie内容时，一般需要通过正则或者字符串的方法进行处理，转换成对象，最终得到数据。

   document.cookie = "name=zhangsan";

   document.cookie = "age=18";

   document.cookie = "sex=23";

​

   //读取cookie

   var result = document.cookie;

   console.log(result);

   使用原生js操作cookie太过麻烦，尤其是cookie的获取和删除操作，使用jquery.cookie插件，能够简化我们的操作。

   【03-cookie存储（jquery插件）.html】

   //设置cookie

   $.cookie("name", "zs");

   //获取cookie

   console.log($.cookie("name"));

   //删除cookie

   $.removeCookie("name");

   2.sessionStorage与localStorage

    HTML5规范提出了解决方案，使用sessionStorage和localStorage存储数据。设置、读取、删除操作很方便

    window.sessionStorage的特点

    1. 声明周期为关闭浏览器窗口

    2. 不能在多个窗口下共享数据。

    3. 大小为5M

    window.localStorage的特点

    1. 永久生效，除非手动删除

    2. 可以多个窗口共享

    3. 大小为20M   

    window.sessionStorage与window.localStorage的方法

    setItem(key, value) //设置存储内容

    getItem(key) //读取存储内容

    removeItem(key) //删除键值为key的存储内容

    clear() //清空所有存储内容

    key(n) //以索引值来获取存储内容