html5本地存储和文件上传

 11/6/2016 8:35:35 AM 
## 网络状态 ##
1. window.navigator.onLine
    - window.navigator.onLine是一个属性，不能实时去监听当前的网络状态  
    - true  当前是有网的
2. 事件通知机制，当网络发生变化的时候，以事件的实时通知
    - 事件  online ：  从没有网到有网的状态的变换
    
            window.addEventListener("online",function(){
                tips.style.display = "block";
                tips.innerHTML="网已连接上O(∩_∩)O~";
            });

  - 事件 offline： 从有网到没有网触发的事件

            window.addEventListener("offline",function(){
                tips.style.display="block";
                tips.innerHTML="没有网了/(ㄒoㄒ)/~~";
            });

## HTML5 地理定位 ##
1. 使用 getCurrentPosition() 方法来获得用户的位置

        <script>
            /*
            判断当前的设备是否支持获取地理位置的对象
            成功的回调函数和失败的回调函数
             */
            if(window.navigator.geolocation){
                 window.navigator.geolocation.getCurrentPosition(function(position){
                     /* 
                     position.coords.longitude 十进制数的经度 
                    position.coords.latitude 十进制数的纬度
                     */
                      var longitude = position.coords.longitude;
                      var latitude = position.coords.latitude;
                      console.log("您当前的经度为："+longitude+"---您当前的纬度为："+latitude);
                 },function(position){
                     console.log("获取位置信息失败");
                 });
            }
        </script>

## HTML5本地存储 ##
### 本地存储localStorage和sessionStorage ###
#### 基本的操作 ####
1. 设置数据,以键值对的形式进行存储

        window.localStorage.setItem("testLS","001");
        window.sessionStorage.setItem("testSS","002");
2. 取值数据 根据属性名进行取值属性值

        console.log(window.localStorage.getItem("testLS"));//001
        console.log(window.sessionStorage.getItem("testSS"));//002
3. 根据存储的下标值进行取值属性名

        console.log(window.localStorage.key(0));//testLS
        console.log(window.sessionStorage.key(0));//testSS
4. 取值数据的长度  注意：是对取出来的数据进行计算的长度

        console.log(window.localStorage.key(0).length);//6
        console.log(window.localStorage.getItem("testLS").length);//3

5. 移除指定数据,进行单个的移除

        window.localStorage.removeItem("testLS");
        window.sessionStorage.removeItem("testSS");
6. 进行移除存储空间下的所有的数据

        window.localStorage.clear();
        window.sessionStorage.clear();

#### localStorage和sessionStorage相同点和差别 ####
1. 相同点
    1. 进行本地应用存储
2. 差异
    1. 存储时间
        - localStorage 可以进行长期的存储
        - sessionStorage关闭当前页面，就找不到了，就是当前的会话周期内有效
        - 注意
            - file:///G注意： 要在同源路径下，直接通过http下面进行找到
        - 代码

                window.localStorage.setItem("waxun","289071767");
                window.sessionStorage.setItem("kaguo","289071767");、、

    2. 共享检测
        1. `localstorage`
            1. 可以进行不同窗口的数据共享在第二个窗口中可以进行访问到本地存储，可以进行取值的到
        2. `sessionStorage`
            1. 直接设置sessionStorage的值在另一个窗口是拿不到的，不可以进行数据共享
            2. 通过a链接可以将本页面的sessionStorage存储的数据共享出去
            3. 代码

                    脚本：window.sessionStorage.setItem("zhuhwkey02","zhuhwval02");
                    页面结构：<a href="3.3共享检测.html">通过a链接可以将本页面的sessionStorage存储的数据共享出去</a>
3. 本地存储的应用
    1. 页面换肤效果
        1. 点击之后进行将点击的颜色进行存储到本地


                document.body.style.backgroundColor = "skyblue";
                window.localStorage.setItem("color","skyblue");
        2. 如果有值的话进行直接从本地存储进行取值

                if(window.localStorage.getItem("color")){
                document.body.style.backgroundColor = window.localStorage.getItem("color");
                }

   2. 对用户访问页面的次数进行计数 
       1. 整理自己经常访问的网站进行计数
       2. 代码实现
           
                <script>
                    // pagecount
                    if(window.localStorage.getItem("pagecount")){
                        var t = window.localStorage.getItem("pagecount");
                        //直接进行取值出来的值是字符串，进行转换成number类型之后再进行累加计算
                        console.log(typeof parseInt(t));
                        t = parseInt(t);
                        t=t+1;
                        window.localStorage.setItem("pagecount",t);
                    }else{
                        window.localStorage.setItem("pagecount",1);
                    }
                </script>

#### 本地存储，存储对象的处理 ####
1. 基本数据类型直接进行字符串进行存储,key value的形式进行存储
    `window.localStorage.setItem("testLS","001");`
2. 进行存储obj类型的数据，需要进行数据转换
    - 代码
        
        var obj = {
                "name":"zhuhw",
                "qq":"289071767"
        };

    - 出现的问题
        
            直接进行存储，不转换的情况下，进行存储的数据是
            objkey  [object Object]
            window.localStorage.setItem("objkey",obj);
            console.log(window.localStorage.getItem("objkey"));//[object Object]
            console.log(typeof window.localStorage.getItem("objkey"));//string
    - 以上不是我们想要的数据
    - 解决方法
        - 进行数据类型的转换
            -  存储的时候要将json字符串转换成string类型进行存储JSON.stringify()
            -  进行取值的时候，进行转换成json的值 JSON.parse(),是一个object数据，直接可以对其进行对象的取值方式

        - 代码
            
                 /*
                1. 存储的时候要将json字符串转换成string类型进行存储JSON.stringify()
                 */
                var str =  JSON.stringify(obj);
                console.log(typeof str);//string
                // objkey  {"name":"zhuhw","qq":"289071767"} 存储的是json形式的字符串
                window.localStorage.setItem("objkey",str);
                //进行取值的时候，进行转换成json的值 JSON.parse(),是一个object数据
                //直接可以对其进行对象的取值方式
                var jsonobj = JSON.parse(window.localStorage.getItem("objkey"));
                //zhuhw===289071767
                  console.log(jsonobj["name"]+"==="+jsonobj["qq"]);

3. 总结
    1. 存储数据：obj--->string   JSON.stringify(obj)
    2. 取值数据： string--->obj  JSON.parse("属性名")


## 文件读取 ##
1. 使用文件上传控件
     `<input type="file">`
2. 点击按钮进行预览
    - `<input type="button" value="文件读取">`
3. 页面样式

        <div class="box">
            <div class="show-img">
                <div class="upload">    
                    <span class="add">添加照片</span>
                </div>
            </div>
        </div>

4. 将读取出来的文件添加到upload里面
    1. 新建一个file    
         `var file = document.querySelector("input[type=file]");`
    2. 获取file里面的值
        `var data = file.files[0];`
    3. 文件里的值需要读取文件的来读取
        1. `var fr = new FileReader();`
        2. `fr.readAsDataURL(data);`
        3. 加载完成，得到result文件流，就是需要的图片的src
                
                  fr.addEventListener("load",function(){
                  var result = fr.result;}
    4. 创建img节点，将其追加到upload节点上
    
             var img = document.createElement("img");
             img.src = result;
             upload.appendChild(img); 

## HTML 5 拖放 ##

页面布局
    
        <div class="box" draggable="true"></div>
        <div class="target"></div>
### 拖拽对象的事件 ###
1. 拖拽对象的事件
    1. 拖拽开始   dragstart
    2. 拖拽结束   dratend
    3. 拖拽进行中 drag  拖拽着不放会一直触发
    
2. 代码
    
        var box = document.querySelector(".box");
        // 1. 拖拽开始   dragstart
        box.addEventListener("dragstart",function(){
            box.style.backgroundColor = "green";
        });
        // 3. 拖拽进行中 drag  拖拽着不放会一直触发
        box.addEventListener("drag",function(){
            // console.log("正在退拽中...");
        })
        // 2. 拖拽结束   dratend
        box.addEventListener("dragend",function(){
            box.style.backgroundColor = "red";
        });

### 目标点的事件 ###
1. 目标对象的事件：
    1. 进入目标点 dragenter
    2. 离开目标点 dragleave
    3. 在目标点上dragover
    4. 放开目标点drop

2. 目标对象的事件
    
        var target = document.querySelector(".target");
            // 1. 进入目标点 dragenter
        target.addEventListener("dragenter",function(){
            console.log("拖拽对象进入目标点");
        });
        // 2. 离开目标点 dragleave
        target.addEventListener("dragleave",function(){
            console.log("拖拽对象离开目标点");
        });
        // 3. 在目标点上dragover
        target.addEventListener("dragover",function(even){
            console.log("拖拽对象经过目标点");
            //配合drop事件，阻止了浏览器的默认行为，drop事件才会被触发
            event.preventDefault();
        });
        // 4. 放开目标点drop
        target.addEventListener("drop",function(even){
            console.log("拖拽对象被放开");
            //放开拖拽对象的时候，将拖拽对象追加到target上
            target.appendChild(box);

            even.stopPropagation();
        });

3. 补充
 最后实现把拖拽的对象目标点为整个文档
-代码
    
        var body = document.body;
        body.addEventListener("dragover",function(even){
            even.preventDefault();
        });
        body.addEventListener("drop", function(){
            //拖拽到target进行drop的时候，进行冒泡给了父级，所以要给target阻止冒泡事件
            body.appendChild(box);
        });
## 将外部文件拖拽到窗口中的目标位位置 ##
1. 将html5拖放和文件上传结合思路
    1. 直接在外部进行拖拽到本浏览器，会将本页面路径进行覆盖
        - 阻止默认事件，文档的，因为是往整个文档里面进行拖拽
        - dragover  和 drop事件都要阻止默认的值
    2.  目标点进行dragover  和  drop事件，
        - 放下的时候，将图片追加到target上面
            1. 步骤
                1. 找到拖拽的对象
                2. 添加到target里面

   3. 从事件中找出外部传过来的数据dataTransfer  files
   4. 代码

            <div class="target"></div>
            <script>
                /*
                将html5拖放和文件上传结合
    
                1. 直接在外部进行拖拽到本浏览器，会将本页面路径进行覆盖
                    - 阻止默认事件，文档的，因为是往整个文档里面进行拖拽
                    - dragover  和 drop事件都要阻止默认的值
                 */
                document.addEventListener("dragover",function(event){
                    event.preventDefault();
                });
                document.addEventListener("drop",function(event){
                    event.preventDefault();
                });
    
                /*
                2. 目标点进行dragover  和  drop事件，
                放下的时候，将图片追加到target上面
                 */
                var target = document.querySelector(".target");
                target.addEventListener("dragover", function(event){
                    event.preventDefault();
                });
                target.addEventListener("drop", function(event){
                    /*
                    1. 找到拖拽的对象
                    2. 添加到target里面
                    */
                    //从事件中找出外部传过来的数据dataTransfer  files
                    console.log(event);
                    var file = event.dataTransfer.files[0];
                    var type = file.type;
                    console.log(type);//image/  video/
                    var fr = new FileReader();
                    console.log(fr);//readAsDataURL()
                    fr.readAsDataURL(file);//读取出数据流
                    //进行读取完的时候进行返回一个result
                    fr.addEventListener("load", function(){
                        var result = fr.result;
                        console.log(result);//解析成一串数据，就是我们想要的图片的src
    
                        //进行创建dom对象
                        
                        if(type.indexOf("image/")>-1){
                            var img = document.createElement("img");
                            img.src = result;
                            target.innerHTML = "";
                            target.appendChild(img);
    
                        }else if(type.indexOf("video/")>-1){
                            var video = document.createElement("video");
                            video.src = result;
                            video.setAttribute("autoplay","autoplay");
                            target.innerHTML = "";
                            target.appendChild(video);
                        };
    
                    });
                });
        </script>

11/7/2016 4:32:20 PM 

评论

1 楼 baeiou 2016-11-10  

window.addEventListener("offline",function(){
这个对于现在的我有用