10 09/2014

html5 本地存储

最后更新: Wed Sep 10 2014 12:36:06 GMT+0800

Chrome 支持

  • Cookies
  • Local Storage
  • Session Strorage
  • Web SQL
  • IndexedDB

Local Storage

浏览器都支持,简单的 key:value,不能查询,大小 5M。

检查是否支持

window.localStorage

设值

localStorage.setItem(‘name’,’guoshuang’) 或者 localStorage.[‘name’]=’guoshuang’)

取值

localStorage.getItem(‘name’) 或者 localStorage[‘name’]

删除

localStorage.removeItem(‘name’)for

遍历

for(var i=0; i< localStorage.length;i++){
var key = localStorage.key(i);  
    console.log(key + ":" + localStorage[key]);  
} 

Web SQL

建库、建表、插值

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  
var msg;  
db.transaction(function (tx) { 
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');  
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');  
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');  

执行查询

db.transaction(function (tx) { 
 tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
  var len = results.rows.length, i;  
  msg = "<p>Found rows: " + len + "</p>";  
  document.querySelector('#status').innerHTML +=  msg;  
  for (i = 0; i &lt; len; i++){ 
    msg = "<p><b>" + results.rows.item(i).log + "</b></p>";  
    document.querySelector('#status').innerHTML +=  msg;  
  } 
}, null);  
});  

中间的参数 argument intended to allow variables to be substituted into statements without risking SQL injection vulnerabilities 是为了安全!

db.readTransaction(function (t) {
  t.executeSql('SELECT title, author FROM docs WHERE id=?', [id], function (t, data) {
    report(data.rows[0].title, data.rows[0].author);
  });
});

删除表

var db = openDatabase("数据库名",'2.0',"描述",60*60*60); 
    db.transaction(function(tx){
        //drop table
        tx.executeSql("drop table 表名");
    })

检查是否已经存在表,避免重复

SELECT name FROM sqlite_master WHERE type=”table” AND name=”t_app_auditcims”

参考资料: http://www.w3.org/TR/webdatabase/

indexedDB

平面数据库 key/value 加简单索引

window.indexedDB.open("CandyDB","My candy store database");

Session Strorage

和 localStorage 几乎一样。区别,window.sessionStorage 重启浏览器就没了。