html5与css3权威指南---读书笔记---第七章 本地存储
本章有两个重要内容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(); }