LocalStorage && SessionStorage

HTML5提供了本地存储的功能,以键值对的存储解决方案,支持容量为4M,不需要使用安全插件,HTML的web Storage 提供了两种在客户端存储数据的方式.

localStorage: 是一种没有时间限制的数据存储方式,可以永久性的将数据保存在客户端
sessionStorage:指的是针对一个session的数据存储,就是将数据保存在session对象中,当关闭浏览器后,这些数据会被删除.

在使用web存储前,应该使用typeof(Storage)=='undefined'函数来判断是否支持storage.

webStorage支持的属性及方法:

getItem(key)
key(index)
length
removeItem(key)
setItem(key, value)
clear()

WebSQL

webSql 并不是HTML5的规范组成部分, 而是单独的规范.
HTML5对WebSQL的操作包含以下3个核心的方法.

openDatabase: 使用现有的数据库,或者新建数据库来创建数据库对象
transaction: 这个方法允许我们执行事务处理
executeSql: 这个方法用于执行SQL语句

openDatabase的参数:

name: 数据库名字
version: 数据库版本号
displayName: 数据库描述
estimatedSize; 数据库存储数据的大小(字节为单位)
creationCallback: 回调函数,可不传

transaction的参数:

一个匿名函数,该匿名函数的参数是transaction对象的引用,可以使其来进行增删改查的操作

executeSql的参数:

sql: 要执行的sql语句
[]:sql语句中的占位符'?' 对应的值
dataHandler: 执行sql语句成功是调用的回调函数
errorHandler: 执行sql语句出错是调用的函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JOE</title>
        <style type="text/css">
        </style>
        <script type="text/javascript" src="jquery-3.2.1.min.js">
            
        </script>
        <script type="text/javascript">
            function getCurrentDB() {
                var db = openDatabase('Demo.db', '1.0', 'demo database', 1024*1024);
                return db;
            }
            
            function initDB() {
                var db = getCurrentDB();
                if(!db){
                    alert('不支持websql');
                    return;
                }
                db.transaction(function(tx){
                    tx.executeSql('create table if not exists Demo(username text null, title text null, content text null)',[],function(tx, result){}, function(tx, message){
                        alert(message);
                    });
                });
            }
            
            window.onload = function(){
                initDB();
            }
            
            function saveContent() {
                    var userName = document.getElementById('username').value;
                    var title = document.getElementById('title').value;
                    var content = document.getElementById('content').value;
                    var db = getCurrentDB();
                    alert(userName+'  '+title+'  '+content);
                    db.transaction(function(tx){
                        tx.executeSql('insert into Demo(username, title, content) values(?,?,?)',[userName,title,content], function(tx,result){},function(tx,result){
                            alert(message);
                        });
                    });
            }
            
                
                function showContent() {
                    var db = getCurrentDB();
                    db.transaction(function(tx){
                        tx.executeSql('select * from Demo',[],function(tx,result){
                            
                            if(result){
                                for (var i = 0; i < result.rows.length; i++) {
//                                  alert(result.rows);
                                    appendDataWithResult(result.rows.item(i));
                                }
                            }
                        },function(tx,message){});
                    });
//                  alert('show');
                }
                
                function appendDataWithResult(item){                    
                    var strHtml = '<tr><td>用户名:'+item.username+'</td></tr>'+'<td>标题:'+item.title+'</td></tr>'+'<td>留言:'+item.content+'</td></tr>';
                    $('#newTable').append(strHtml); 
                }
            
        </script>
    </head>
    <body>
        <div id="websql">
            <table id="myTable">
                <tr>
                    <td>用户名:</td>
                    <td><input type="text" name="username" id="username" value="" required=""/></td>
                </tr>
                <tr>
                    <td>标题:</td>
                    <td><input type="text" name="title" id="title" value="" required=""/></td>
                </tr>
                <tr>
                    <td>留言:</td>
                    <td><input type="text" name="content" id="content" value="" required/></td>
                </tr>
            </table>
            <hr />
            <input type="button" name="show" id="show" value="显示" onclick="showContent()"/>
            <input type="button" name="" id="" value="保存" onclick="saveContent()" />
            <table border="1px" cellspacing="" cellpadding="" id='newTable'>
            </table>
            <br />
        </div>
        
    </body>
</html>