html5 本地化存储Web Storage

2015/07/28 53735
<!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>
代码片段
