Day08（HTML5 demo 讀取文件，存取數(shù)據(jù)）

讀取文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>      
        <div><input type="file" id="myfile" multiple="multiple"/></div>
        <div id="box"></div>
    </body>
    <script type="text/javascript">
        var myfile =document.getElementById("myfile");
        var box = document.getElementById("box")
        myfile.onchange = function(){
//          console.log(myfile.files[0].name);

            if(myfile.files[0]){    // 如果選擇文件           
                for(var i=0;i<myfile.files.length;i++){
                    // continue 本次循環(huán)中continue語(yǔ)句不執(zhí)行，直接執(zhí)行 i++
                    if(myfile.files[i].type.indexOf("image")==-1) continue;
                    var fs = new FileReader();
                    fs.readAsDataURL(myfile.files[i]);  // 讀取文件
                    fs.onload = function(){
                        var imgdata = this.result;  // base 64
                        var img = new Image();
                        img.src = imgdata;
                        box.appendChild(img);
                    }
                }
                
            }
        }
    </script>
</html>

存，取 數(shù)據(jù)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button id="save">存</button>
        <button id="fetch">取</button>
        
    </body>
    
    <script>
        var btnsave = document.getElementById("save");
        var btnfatch = document.getElementById("fetch");
        
        //session 會(huì)話
        btnsave.onclick = function(){
            //sessionStorage.setItem("mysave","canvas"); //用戶打開(kāi)瀏覽器到關(guān)閉期間的數(shù)據(jù)，適合用戶登錄期間的數(shù)據(jù)
            localStorage.setItem("mysave","canvas") // 長(zhǎng)期存在用戶的瀏覽器里，除非刪除
            alert("save successfully!");
        }
        
        btnfatch.onclick = function(){
            //alert(sessionStorage.getItem("mysave"));
            alert(localStorage.getItem("mysave"));
        }
        
    </script>
</html>

表單存取

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="">
            
            用戶名：<input type="text"/>
            密碼：<input type="text"/>
            確認(rèn)密碼：<input type="text"/>
            電話：<input type="text"/>
        </form>
    </body>
    <script type="text/javascript">
        var inputs = document.getElementsByTagName("input");
        window.onunload = function(){
            var arr = [];
            for(var i=0;i<inputs.length;i++){
                arr.push(inputs[i].value);
            }
            localStorage.setItem("mysaveForm",arr);
        }
        
        window.onload = function(){
            var getArr = localStorage.getItem("mysaveForm").split(",");
            
            for(var i=0;i<getArr.length;i++){
                inputs[i].value = getArr[i];
            }
        }
    </script>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容