html5与css3权威指南---读书笔记---第七章本地存储

Posted on 2013-03-21 16:14 Amy-lover 阅读(240) 评论(0) 编辑收藏举报

本章有两个重要内容WebStorage和本地数据库

一、WebStorage

1，WebStorage存储机制是对html4的cookies的一个改善，那么cookies存在哪些问题呢？

　　cookies大小限制为4KB；cookies随http事务一起发送，浪费一部分发送cookies时使用的带宽；要正确操作cookies很复杂

2，WebStorage分为两种;sessionStorage和localStorage

	sessionStorage	localStorage
概念	将数据保存到session对象中(session是用来保存用户进入某网站到离开这段时间里要保存的数据)	将数据存储在客户端本地的设备上
保存数据的区别	临时保存，浏览器关闭就没有了	永久保存，即使浏览器关闭，下次访问该网站仍然可以使用，数据保存按照不同的浏览器分别进行
存取数据方法 setItem getItem	sessionStorage.setItem(key,value) sessionStorage.getItem(key)	localStorage.setItem(key,value) localStorage.getItem(key)
存取数据方法属性以及中括号	sessionStorage.keyName=”value“ var value=sessionStorage.keyName sessionStorage[keyName]=”value“ var value=sessionStorage[keyName]	localStorage.keyName=”value“ var value=localStorage.keyName localStorage[keyName]=”value“ var value=localStorage[keyName]
根据索引获取keyName的方法	sessionStorage.key(i)	localStorage.key(i)
清除数据的方法	sessionStorage.clear()	localStorage.clear()
浏览器支持情况	IE７及以下不支持	IE７及以下不支持
移动数据的方法	sessionStorage.removeItem(keyName);	localStorage.removeItem(keyName);

<div id="show"></div>
<input type="text" id="input_01" value="1" />
<input type="text" id="input_02" value="2" />
<input type="button" value="show" onclick="show()"/>
<input type="button" value="remove" onclick="remove()"/>
<input type="button"  value="clear" onclick="data_clear()"/>

　　var key_01=document.getElementById("input_01");
    var key_02=document.getElementById("input_02");
    var show_div=document.getElementById("show");
    sessionStorage.setItem("key_01",key_01.value);
    sessionStorage.setItem("key_02",key_02.value);
    function show(){
        for(var i=0;i<sessionStorage.length;i++){
            var key=sessionStorage.key(i);
            var value=sessionStorage.getItem(key);
            show_div.innerHTML+=key+": "+value+"  ";
        }       
    }
    function data_clear(){
        sessionStorage.clear();
        alert(sessionStorage.length);
    }
    function remove(){
        sessionStorage.removeItem('key_01');
        alert(sessionStorage.length);
    }

二、本地数据库(chrome支持，firefox和ie不支持)

html5中内置了一个可以通过SQL语言来访问的数据库，可以像访问本地文件一样轻松地对内置数据库进行直接访问，被称为SQLLite的文件型SQL数据库

1,使用openDatabase方法创建一个访问数据库的对象

var db=openDatabase('数据库名称','版本号','数据库描述','数据库的大小');

var db=openDatabase('mydb','1.0','my database','2*1024*1024');

2,调用transaction方法，执行事务处理

db.transaction(function(tx){});

3,transaction方法使用了一个回调函数，transaction对象的executeSql方法

db.transaction(function(tx){
    tx.executeSql('sql语句','[sql语句中用？表示的参数]','sql语句执行成功后的回调函数','sql语句执行失败后的回调函数')
});

db.transaction(function(tx){
    tx.executeSql('create table if not exists myTable(name TEXT,age INTEGER)','[]');  
});//创建一个表格

 db.transaction(function(tx){
     tx.executeSql('select * from myTable',[],function(tx,successResult){//检索操作成功后，将结果放在参数successResult中
        for(var i=0;i<successResult.rows.length;i++){
            rs.rows.item(i);//结果中的一条记录
        }
    });
});//检索

db.transaction(function(tx){
     tx.executeSql(insert into myTable values(?,?)',[name,age],function(tx,successResult){alert("成功增加数据！");
          },function(tx,error){
　　　　　　alert("保存数据出错："+error.message);
　　});
});//保存数据

db.transaction(function(tx){
    tx.executeSql('sql语句',[sql语句中用？表示的参数],function(tx,rs){},function(tx,error){})
});

<body onload='init();'>
    <table>
        <tr><td>name:</td><td><input type="text" id="name"/></td></tr>
        <tr><td>age:</td><td><input type="text" id="age"/></td></tr>
        <tr><td></td><td><input type="button" onclick="saveData();" value="save"/></td></tr>
    </table>
    <table id="dataTable"></table>
</body>

var datatable=null;
    var db = openDatabase('my','1.0','我的数据库','2*1024*1024');
    function init(){
        datatable=document.getElementById('dataTable');        
        showAllData();
    }        
    function removeAllData(){
        for(var i = datatable.childNodes.length-1;i>=0;i--){
            datatable.removeChild(datatable.childNodes[i]);
        }
        var tr=document.createElement('tr');
        var th1=document.createElement('th');
        var th2=document.createElement('th');
        th1.innerHTML='name';
        th2.innerHTML='age';    
        tr.appendChild(th1);
        tr.appendChild(th2);
        datatable.appendChild(tr);
    }
    function showData(row){
        var tr=document.createElement('tr');
        var td1=document.createElement('td');
        var td2=document.createElement('td');
        td1.innerHTML=row.name;
        td2.innerHTML=row.age;
        tr.appendChild(td1);
        tr.appendChild(td2);
        datatable.appendChild(tr); 
    }
    function showAllData(){
        db.transaction(function(tx){
            tx.executeSql("CREATE TABLE IF NOT EXISTS myTable(name TEXT,age INTEGER)",[]);
            tx.executeSql("SELECT * FROM myTable",[],function(tx,successResult){
                removeAllData();
                for(var i=0;i<successResult.rows.length;i++){
                    showData(successResult.rows.item(i));
                }
            },function(tx,error){
                alert("检索时出错："+error.source);
            });
        });
    }
    function addData(name,age){
        db.transaction(function(tx){
            tx.executeSql("insert into myTable values(?,?)",[name,age],function(tx,successResult){
                alert("添加成功");
            },function(tx,error){
                alert("添加数据时出错："+error.source);
            });
        });
    }function saveData(name,age){
        var name=document.getElementById('name').value;
        var age=document.getElementById("age").value;
        addData(name,age);
        showAllData();
    }

会员力量，点亮园子希望

刷新页面返回顶部

Amy-lover

公告

html5与css3权威指南---读书笔记---第七章 本地存储

html5与css3权威指南---读书笔记---第七章本地存储