HTML5-本地存储总结

这里介绍了JavaScript中使用HTML5的新特性：

兼容 时间 大小   差异

sessionStorage all 类似【session】

localStorage all第二天、第二周或下一年之后，数据依然可用

globalStorage Firefox（目前只有FF支持）类似【sessionStorage 】

Web Sql Database all

 

 

 

//--------------------------会话级别的本地存储：sessionStorage-----------------------

 <script type="text/javascript">
        //添加key-value 数据到 sessionStorage
        sessionStorage.setItem("demokey", "sessionStorage记住我");
        //通过key来获取value
        var dt = sessionStorage.getItem("demokey");
        alert(dt);
        //清空所有的key-value数据。
        //sessionStorage.clear();
        alert(sessionStorage.length);
</script>


//--------------------------永久本地存储：localStorage-----------------------------------
<script type="text/javascript">
        //添加key-value 数据到 localStorage
        localStorage.setItem("demokey", "localStorage记住我");
        //通过key来获取value
        var dt = localStorage.getItem("demokey");
        alert(dt);
        //清空所有的key-value数据。
        //localStorage.clear();
        alert(localStorage.length);
</script>


//--------------------------暂时本地存储：globalStorage-----------------------------------
/*
现在Firefox只支持当前域下的globalStorage存储
过期时间同 localStorage，其它的一些特性也和localStorage相似。
?globalStorage['developer.mozilla.org'] —— 在developer.mozilla.org下面所有的子域都可以通过这个命名空间存储对象来进行读和写。
?globalStorage['mozilla.org'] —— 在mozilla.org域名下面的所有网页都可以通过这个命名空间存储对象来进行读和写。
?globalStorage['org'] —— 在.org域名下面的所有网页都可以通过这个命名空间存储对象来进行读和写。
?globalStorage[''] —— 在任何域名下的任何网页都可以通过这个命名空间存储对象来进行读和写
?设置 key 值：window.globalStorage["planabc.net"].key = value;
?获取 key 值：value = window.globalStorage["planabc.net"].key;
?removeItem(key) —— 删除 key 值。
*/




//----------------------------Web Sql Database--------------------------------------------
//第一步：打开连接并创建数据库 

var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024function () { } );

if (!dataBase) {
    alert("数据库创建失败！");
} else {
    alert("数据库创建成功！");
}
//第二步：创建数据表 
this.createTable=function() {


  dataBase.transaction( function(tx) { 
    tx.executeSql(
        "create table if not exists stu (id REAL UNIQUE, name TEXT)", 
        [], 
        function(tx,result){ alert('创建stu表成功'); }, 
        function(tx, error){ alert('创建stu表失败:' + error.message); 
    });
 });
}
//第三步：执行增删改查 


// 1）添加数据：
this.insert = function () {
  dataBase.transaction(function (tx) {
            tx.executeSql(
        "insert  into  stu (id, name) values(?, ?)",
        [id, '徐明祥'],
        function () { alert('添加数据成功'); },
        function (tx, error) { alert('添加数据失败: ' + error.message); 
        } );
    });
//      2）查询数据

 

db.transaction(function (context) {
           context.executeSql('SELECT * FROM testTable', [], function (context, results) {
            var len = results.rows.length, i;
            console.log('Got '+len+' rows.');
               for (i = 0; i < len; i++){
              console.log('id: '+results.rows.item(i).id);
              console.log('name: '+results.rows.item(i).name);
            }
         });

 

// 3）更新数据
this.update = function (id, name) {
    dataBase.transaction(function (tx) {
            tx.executeSql(
        "update  stu  set  name =  ?  where  id= ?",
        [name, id],
         function (tx, result) {
         },
        function (tx, error) {
            alert('更新失败: ' + error.message);
        });
   });
}


//      4）删除数据
   this.del = function (id) {
            dataBase.transaction(function (tx) {
            tx.executeSql(
        "delete  from  stu  where  id= ?",
        [id],
         function (tx, result) {
         },
        function (tx, error) {
            alert('删除失败: ' + error.message);
        });
     });
   }


//       5）删除数据表
  this.dropTable = function () {
              dataBase.transaction(function (tx) {
            tx.executeSql('drop  table  stu');
        });
    }