hmtl5 web SQL 和indexDB
前端缓存有cookie,localStorage,sessionStorage,webSQL,indexDB;
cookie:有缺点
localStorage:功能单一
sessionStorage:会话级
webSQL:仅谷歌支持(标准查询语句)
重点-------------------indexDB
IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言,IndexedDB 不属于关系型数据库(不支持 SQL 查询语句),更接近 NoSQL 数据库。
数据相关操作直接上代码:
/*web SQL 只有谷歌支持 几乎不用*/ /*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)‘); tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")‘); tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")‘); }); db.transaction(function (tx) { tx.executeSql(‘SELECT * FROM LOGS‘, [], function (tx,result) { var len = result.rows.length, i; for (i = 0; i < len; i++) { console.log(result.rows.item(i).log); } }, null); });*/
/** * IndexedDB * */ var db;/*数据库对象*/ var objectStore;/*仓库(表)*/ /** * 创建数据库 */ var request = window.indexedDB.open(‘myIndex‘, 3);/*该域中的数据库myIndex*/ request.onerror = function (event) { console.log(‘open database error‘); }; /** * 业务代码 */ request.onsuccess = function (event) { db = request.result;/*数据库对象*/ // add(); // read(); // update(); // remove(); readAll(); // console.log(db); }; /** * 创建表 */ request.onupgradeneeded = function (event) { db = event.target.result;/*数据库对象*/ if (!db.objectStoreNames.contains(‘person‘)){ objectStore = db.createObjectStore(‘person‘,{keyPath:‘id‘});/*创建person仓库(表) 主键*/ // objectStore = db.createObjectStore(‘person‘,{autoIncrement:true});/*自动创建主键*/ objectStore.createIndex(‘name‘, ‘name‘, {unique:false}); objectStore.createIndex(‘email‘, ‘email‘, {unique:true}); } console.log(db); }; /** * 插入数据 */ function add() { var request = db.transaction([‘person‘], ‘readwrite‘) .objectStore(‘person‘) .add({ id: 1, name: ‘张三‘, age: 24, email: ‘‘ }); request.onsuccess = function (event) { console.log(‘数据写入成功‘); }; request.onerror = function (event) { console.log(‘数据写入失败‘); }; } /** * 读取数据 */ function read() { var transaction = db.transaction([‘person‘]); var objectStore = transaction.objectStore(‘person‘); var request = objectStore.get(1); request.onerror = function (event) { console.log(‘事物失败‘); }; request.onsuccess = function (event) { if (request.result) { console.log(‘Name‘ + request.result.name); console.log(‘Age‘ + request.result.age); console.log(‘Email‘ + request.result.email); }else{ console.log(‘未获得数据记录‘); } }; } /** * 遍历数据 */ function readAll() { var objectStore = db.transaction([‘person‘]).objectStore(‘person‘); objectStore.openCursor().onsuccess = function (event) { var cursor = event.target.result; if (cursor){ console.log(‘Id:‘ + cursor.key); console.log(‘Name:‘ + cursor.value.name); console.log(‘Age:‘ + cursor.value.age); console.log(‘Email:‘ + cursor.value.email); } else { console.log(‘没有更多数据了‘); } } } /** * 更新数据 */ function update() { var request = db.transaction([‘person‘], ‘readwrite‘) .objectStore(‘person‘) .put({ id: 1, name: ‘李四‘, age: 35, email: ‘‘ }); request.onsuccess = function (event) { console.log(‘数据更新成功‘); }; request.onerror = function (event) { console.log(‘数据更新失败‘); }; } /** * 删除数据 */ function remove() { var request = db.transaction([‘person‘], ‘readwrite‘) .objectStore(‘person‘) .delete(1); request.onsuccess = function (event) { console.log(‘数据删除成功‘); }; }
相关推荐
PkJY 2020-07-08
饮马天涯 2020-07-05
huacuilaifa 2020-05-12
csdnInfo 2015-02-25
BlackWhite 2019-07-01
YangSunshine 2019-07-01
sunqy 2019-06-30
csdnInfo 2019-06-29
yunxian 2019-06-29
yongyoumengxiang 2019-06-28
Dr凉 2019-06-28
zhaojp0 2019-06-27
拼命工作好好玩 2019-06-27
BlackWhite 2015-02-25
wenhuadream 2015-01-25
PkJY 2015-01-03
bluetears 2014-12-12