本地存储小案例

<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>

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');
}

<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();
}