html5 本地化存儲Web Storage

時間 2019-12-10
標籤 html5 html 本地化存儲 web storage 欄目 HTML5 简体版
原文原文鏈接
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>html5 本地化存儲Web Storage</title>
    <script type="text/javascript">
        /**
         * html5中新增web storage 本地化存儲sessionStorage,localStorage,
         *  能夠替代之前的cookie。
         *  cookie 能夠保存4kb的信息;
         *  cookie是隨着http發送的，耗費必定的帶寬;
         *   cookie除了添加，刪除，設置有效期外，很難進行其餘操做。
         *
         *
         *   sessionStorage: 一次會話有效,相似於servlet中的session;
         *   localStorage :能夠存儲到本地，永久保存。
         *
         */
        //保存數據
        function saveData(){
            var mail = document.getElementById("mail");

            //將信息保存到session中
            sessionStorage.setItem("mail",mail.value);
              //將信息存儲到本地
            localStorage.setItem("email",mail.value);
        }

        //讀取數據
        function loadData(){

            var msg = document.getElementById("msg");
            //清除sessionStorage中的信息
            sessionStorage.clear();
            //從sessionStorage 中獲取信息
           var mail =  sessionStorage.getItem("mail");


            //從localStorage中獲取信息
            var email = localStorage.getItem("email");
            msg.value=mail+" , "+email;

        }

    </script>
</head>
<body>

    <input type="text" id="mail" >


   <textarea rows="10" cols="7" id="msg"  placeholder="數據顯示區域">
   </textarea>


   <input type="button" onclick="saveData();" value="保存數據">
       <input type="button" onclick="loadData();" value="讀取數據">


<form>
    <table>

        <tr>
            <td>用戶名:</td>
            <td><input type="text" id="name" ></td>

        </tr>

        <tr>
            <td>年齡:</td>
            <td><input type="text" id="age" ></td>

        </tr>

        <tr>
            <td>郵箱:</td>
            <td><input type="text" id="em" ></td>

        </tr>

        <tr>
<td></td>

            <td><input type="button" value="保存信息" onclick="saveUser();" >
                <input type="button" value="查詢信息"  onclick="getUser();">


                <input type="button" value="保存信息到數據庫" onclick="saveUserToDB();" >
                <input type="button" value="從數據庫中查詢信息"  onclick="getUserFromDB();">

            </td>

        </tr>

    </table>





</form>

<script type="text/javascript">
    /**
     * 模擬本地化存儲
     */
    function saveUser(){
        var user = new Object;
        //定義屬性並賦值
        user.username=document.getElementById("name").value;
        user.age=document.getElementById("age").value;
        user.mail = document.getElementById("em").value;

        //將對象轉化爲json字符串
        var data = JSON.stringify(user);
        sessionStorage.setItem("user",data);
        console.info("保存user對象成功..."+data);
    }


    function getUser(){
          //獲取到的JSON字符串
        var user = sessionStorage.getItem("user");
        var msg = document.getElementById("msg");

        //將json字符串格式化爲對象
        //下面兩種方法均可行
       // var info =JSON.parse(user);
        var info = eval('('+user+')');
        var result = info.username+","+info.age+","+info.mail;
        msg.value =result;
        console
                .info(user+","+info);//{"username":"23456","age":"wefr","mail":"fesdbg"},[object Object]
    }


    function saveUserToDB(){

        var user = new Object();
        user.username=document.getElementById("name").value;
        user.age=document.getElementById("age").value;
        user.mail = document.getElementById("em").value;
        /**
         * 相似嵌入式系統中的'SQLite'數據庫,
         * Firefox 35.0 不支持，
         * chrome支持
         * @type {Database}
         */
        var db =window.openDatabase("html5",'1.0','WebStorage',2*1024*1024);
        console.info("數據庫信息:"+db);

        db.transaction(function(tx){
            //建立表
            var sql='create table if not exists user(id int,name varchar(100),age int ,mail varchar(100) ) ';
          tx.executeSql(sql);

        });
        db.transaction(function(tx){
            //保存數據到數據庫
           tx.executeSql('insert into user values (1,?,?,?)',[user.username,user.age,user.mail],
                   //成功的回調函數
            function(tx,msg){
                console.info("執行sql語句成功:"+msg);
                //失敗的回調函數
            },function(tx,msg){

                console.info("執行sql語句失敗:"+msg);

            });
        });




    }


    function getUserFromDB(){
 //獲取數據庫
        var db =window.openDatabase("html5",'1.0','WebStorage',2*1024*1024);

        db.transaction(function(tx){
            /**
             * 執行查詢
             */
            tx.executeSql('select id,name,age,mail from user where id=?',[1],function(tr,msg){
                /**
                 * 遍歷結果集
                 */
                for (var i=0;i<msg.rows.length;i++){
                    //獲取一條記錄封裝後的對象
                    //msg.rows.item(i).id ,--.name,--.mail獲取指定的信息
                    console.info(msg.rows.item(i));
                }

            });
        });





    }


</script>

</body>
</html>