本地存储小案例

<script>
        //创建indexedDB对象
        window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
        window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
        window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
        window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;

        //创建数据库连接
        function connectDatabase() {
            var dbName = "indexDBtest";
            var dbVersion = 1;
            var idb;
            var dbConnect = indexedDB.open(dbName,dbVersion);
            dbConnect.onsuccess = function (e) {
                idb = e.target.result;
                alert("数据库连接成功");
            }
            dbConnect.onerror = function () {
                alert("连接失败");
            }
        }

        //更新数据库版本
        function VersionUpdate() {
            var dbName = "indexDBtest";
            var dbVersion = 2;
            var idb;
            var dbConnect = indexedDB.open(dbName, dbVersion);
            dbConnect.onsuccess = function (e) {
                idb = e.target.result;
                alert("数据库连接成功");
            }
            dbConnect.onerror = function () {
                alert("数据库连接失败");
            }
            dbConnect.onupgradeneeded = function (e) {
                idb = e.target.result;
                var tx = e.target.transaction;
                var oldVersion = e.oldVersion;
                var newVersion = e.newVersion;
                alert("数据库更新成功" + oldVersion + "---" + newVersion);
            }
        }

        //创建仓库
        function CreateObjectStore() {
            var dbName = "indexDBtest";
            var dbVersion = 3;
            var idb;
            var dbConnect = indexedDB.open(dbName,dbVersion);
            dbConnect.onsuccess = function (e) {
                idb = e.target.result;
                alert("数据库连接成功");
            }
            dbConnect.onerror = function () {
                alert("数据库连接失败");
            }
            dbConnect.onupgradeneeded = function (e) {
                idb = e.target.result;
                var name = "user";
                var optionalParameters = {
                    keyPath :"userid",
                    autoIncrement:false
                };
                var store = idb.createObjectStore(name,optionalParameters);
                alert("对象仓库创建成功");
            }
        }
    </script>

 <script>
        //索引及游标的使用
        var myDB = {
            name: "helloindexDB",
            version: 1,
            db: null
        };

        var students = [{
            id: 101,
            name: "aa",
            age: 11
        }, {
            id: 102,
            name: "bb",
            age: 11
        }, {
            id: 103,
            name: "cc",
            age: 11
        }, {
            id: 104,
            name: "dd",
            age: 14
        }];

        function openDB(name, version) {
            var version = version || 1;
            var request = window.indexedDB.open(name, version);
            request.onerror = function (e) {

            }
            request.onsuccess = function (e) {
                myDB.db = e.target.result;
            }
            request.onupgradeneeded = function (e) {
                var db = e.target.result;
                if (!db.objectStoreNames.contains("students")) {
                    var store = db.createObjectStore("students", { keyPath: "id" });
                    store.createIndex("nameIndex", "name", { unique: true });
                    store.createIndex("ageIndex", "age", { unique: false });
                }
            }
        }

        function addData(db, storeName) {
            var transaction = db.transaction(storeName, "readwrite");
            var store = transaction.objectStore(storeName);
            for (var i = 0; i < students.length; i++) {
                store.add(students[i]);
            }
        }

        openDB(myDB.name, myDB.version);
        setTimeout(function () {
            addData(myDB.db, "students");
        }, 1000);

        //通过姓名索引获取数据
        function getDataByIndexName(db, storeName) {
            var transaction = db.transaction(storeName);
            var store = transaction.objectStore(storeName);
            var index = store.index("nameIndex");
            index.get("aa").onsuccess = function (e) {
                var student = e.target.result;
                //console.log("nameIndex：" + student.name + "--" + student.age + "--" + student.id);
            };
        }
        setTimeout(function () {
            getDataByIndexName(myDB.db, "students");
        }, 1000);

        //通过年龄索引获取数据
        function getDataByIndexAge(db, storeName) {
            var transaction = db.transaction(storeName);
            var store = transaction.objectStore(storeName);
            var index = store.index("ageIndex");
            //多个11，但只取出一个
            index.get(11).onsuccess = function (e) {
                var student = e.target.result;
                //console.log("ageIndex：" + student.name + "--" + student.age + "--" + student.id);
            };
        }
        setTimeout(function () {
            getDataByIndexAge(myDB.db, "students");
        }, 1000);

        //游标
        function fetchStoreByCursor(db, storeName) {
            var transaction = db.transaction(storeName);
            var store = transaction.objectStore(storeName);
            var request = store.openCursor();
            request.onsuccess = function (e) {
                var cursor = e.target.result;
                if (cursor) {
                    //console.log(cursor.key);
                    var currentStudent = cursor.value;
                    //console.log(currentStudent.name);
                    //游标下移，获取下一条数据
                    cursor.continue();
                }
            }
        }
        setTimeout(function () {
            fetchStoreByCursor(myDB.db, "students");
        }, 1000);

        //index与游标配合
        function getDataByCursor(db,storeName) {
            var transaction = db.transaction(storeName);
            var store = transaction.objectStore(storeName);
            var index = store.index("ageIndex");
            var request = index.openCursor(IDBKeyRange.only(11));
            request.onsuccess = function (e) {
                var cursor = e.target.result;
                if (cursor) {
                    var student = cursor.value;
                    //console.log(student.id);
                    cursor.continue();
                }
            };
        }
        setTimeout(function () {
            getDataByCursor(myDB.db,"students");
        }, 500);

        //根据游标范围获取数据
        //IDBKeyRange.only(value); 只获取指定数据
        //IDBKeyRange.lowerBound(value,isopen); 获取最小是value,第二个参数用来表示是否包含最小值本身(即value为5，是否包含5)
        //IDBKeyRange.upperBound(value,isopen);
        //IDBKeyRange.bound(value1,value2,isopen1,isopen2)
        function getDataByCursorRange(db,storeName) {
            var transaction = db.transaction(storeName);
            var store = transaction.objectStore(storeName);
            var index = store.index("nameIndex");
            var request = index.openCursor(IDBKeyRange.bound("b","z",false,true));
            request.onsuccess = function (e) {
                var cursor = e.target.result;
                if (cursor) {
                    var student = cursor.value;
                    console.log(student.id);
                    cursor.continue();
                }
            };
        }
        setTimeout(function () {
            getDataByCursorRange(myDB.db, "students");
        }, 500);
    </script>

以上是IndexedDB。

Web Storage：

function saveStorage(id) {
    var data = document.getElementById(id).value;
    var time = new Date().getTime();
    //保存数据
    localStorage.setItem(time, data);
    alert("数据已存储");
    loadStorage(‘msg‘);
}

function loadStorage(id) {
    var result = "<table border = ‘1‘>";
    for (var i = 0; i < localStorage.length; i++) {
        var key = localStorage.key(i);
        var value = localStorage.getItem(key);
        var date = new Date();
        date.setTime(key);
        result += "<tr><td>" + value + "</td><td>" + date + "</td></tr>";
    }
    result += "</table>";
    var target = document.getElementById(id);
    target.innerHTML = result;
}

function clearStorage(id) {
    localStorage.clear();
    alert("数据已经删除");
    loadStorage(‘msg‘);
}

Web SQL Database：

<body onload="init()">
    <table>
        <tr><td>姓名：</td><td><input type="text" id="name" /></td></tr>
        <tr><td>留言：</td><td><input type="text" id="memo" /></td></tr>
        <tr>
            <td></td>
            <td><input type="button" value="保存" onclick="saveData()"/></td>
        </tr>
    </table>
    <hr />
    <table id="datatable" border="1">
        <p id="msg"></p>
    </table>
</body>

var datatable = null;
var db = openDatabase("MyData", "", "My Database", 1024 * 100);
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");
    var th3 = document.createElement("th");
    th1.innerHTML = "姓名";
    th2.innerHTML = "留言";
    th3.innerHTML = "时间";
    tr.appendChild(th1);
    tr.appendChild(th2);
    tr.appendChild(th3);
    datatable.appendChild(tr);
}

//显示数据
function showData(row) {
    var tr = document.createElement("tr");
    var td1 = document.createElement("td");
    td1.innerHTML = row.name;
    var td2 = document.createElement("td");
    td2.innerHTML = row.message;
    var td3 = document.createElement("td");
    var t = new Date();
    t.setTime(row.time);
    td3.innerHTML = t.toLocaleDateString() + " " + t.toLocaleTimeString();
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    datatable.appendChild(tr);
}

//显示所有数据
function showAllData() {
    db.transaction(function (tx) {
        tx.executeSql("CREATE TABLE IF NOT EXISTS MsgData(name TEXT,message TEXT, time INTEGER)", []);
        tx.executeSql("SELECT * FROM MsgData", [], function (tx, rs) {
            removeAllData();
            for (var i = 0; i < rs.rows.length; i++) {
                showData(rs.rows.item(i));
            }
        });
    });
}

//添加数据
function addData(name, message, time) {
    db.transaction(function (tx) {
        tx.executeSql("INSERT INTO MsgData VALUES(?,?,?)", [name, message, time], function () {
            alert("成功");
        }, function (tx, error) {
            alert(error.source + ":" + error.message);
        });
    });
}

//保存数据
function saveData() {
    var name = document.getElementById("name").value;
    var memo = document.getElementById("memo").value;
    var time = new Date().getTime();
    addData(name, memo, time);
    showAllData();
}