HTML5存储

1.0 HTML5的本地存储

WebStorage本地存储
1. SessionStorage：将数据保存在 Session中，在浏览器关闭时进行销毁
2. localStorage：将数据保存在客户端本地的硬件设备中，
WebStorage特性：
- 生命周期：localstorage 的生命周期是永久的，除非删除数据，另一个sessionstorage的生命周期仅在会话页面下有小
- 存储大小： localStorage 和 sessionStorage 的存储数据一般大小都是 5MB
- 存储位置：localstorage 和 sessionStorage 都保存在客户端，不与服务器进行交互通信
- 存储内容类型：localStorage 和 sessionStorage 只能存储 字符类型对于复杂的对象，使用 JSON对象中的 stringify 和 parse 来处理
- 获取方式：localStorage 长用于长期登录（判断用户是否登录），适合长期保存在本地的数据；sessionStorage 在应用时需要被刺输入密码才可登录。
- 用法
  1. setItem (key, value)：保存数据，以键值对传入，即可获取对应的value值
  2. getItem (key)：获取数据，将键值传入，即可获取到对应的value值
  3. removeItem( key) ：删除单个数据，根据键值移除对应的信息。
  4. clear ()：删除所有的数据
  5. key ( index) ：获取某个索引的key

2.0 Web SQL 数据库

2.1 核心用法

规范中定义的3个核心用法：

openDatabase：使用现有的数据库或新建数据库创建一个数据对象
transaction：能够控制一个事物，以及基于这种情况来执行提交或者回滚
executeSQL：用于执行SQL查询

2.2 打开数据库

openDatabase() 方法用来打开已存在的数据库，如果不存在则会创建一个新的数据库

方法对应的5个参数：数据库名称，版本号，文本描述，数据库大小，创建回调（会在数据库创建后被调用）

<script>
    var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024)
</script>

2.3 执行创建表

创建表操作使用：database.transaction() 函数，代码如下：

<script>
    var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024)
    db.transaction(function(tx){
        tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS(id,unique,log)')
    })
    // 创建了一个名为 LOGS 表
</script>

2.4 插入数据

插入数据，代码如下：

<script>
    var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024)
 db.transaction(function(tx){
        // 创建了一个名为 LOGS 表
        tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS(id,unique,log)')
        // 插入数据
        tx.executeSql('INSERT INTO LOGS(id,log) VALUES(1, '测试数据')')
        tx.executeSql('INSERT INTO LOGS(id, log) VALUES(2, 'www.baidu.com')')
        
        // 使用动态值来插入
        // 'e_id'和'e_log'是外部变量，executeSql会映射数组参数中的每个条目给出的'?'所对应的值
        tx.executeSql('INSERT INTO LOGS(id,log) VALUES(?, ?)',[e_id, e_log])
    })
 
</script>

2.5 读取数据

以下代码演示读取数据库中的数据：

<script>
    var db = openDatabase('mydb', '1.0', 'Text DB', 2 * 1024 * 1024);
    db.transaction(function(tx){
        tx.executeSql('SELECT * FROM LOGS',[], function(tx,result){
            var len = result.rows.length;
            msg = "<P>查询记录条数：" + len + "</p>"
            document.querySelector('#status').innerHTML += msg;
            for(i = 0; i<len; i++){
                alert(result.rows.item(i).log)''
            }
        },null)
    })
</script>

2.6 删除数据

删除记录代码如下：

<script>
    db.transaction(function(tx){
        tx.executeSql('DELTER FROM LOGS WHERE id = 1');
    })
</script>

删除指定id，动态写法：

<script>
    db.transaction(function(ts){
        tx.executeSql('DELETE FROM LOGS Where id = ?',[id   ])
    })
</script>

2.7 更新数据

更新数据代码如下：

<script>
    db.transaction(function(tx){
        tx.executeSql('UPDATE LOGS SET log = \' www.1.6.com\' WHERE id = 2')
    })
    
</script>

修改指定数据，动态写法：

<script>
    db.transaction(function(tx){
        tx.executeSql('UPDATE LOGS SET log = \' www.1.6.com\' WHERE id = ?',[id])
    })
    
</script>