indexedDb TEST

huangyongxing310

浏览: 490801 次
性别:
来自: 广州

最近访客更多访客>>

hiroada

lixiaoxin

u012363178

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

WEB
JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>签到</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">



    <script src="../miniui/scripts/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="./commonJs.js" type="text/javascript"></script>


</head>

<body>
<input type="file" class="" name="upload-file" id="upload-file" />

<input type="button" id="btnCrop" class="Btnsty_peyton" value="裁切">
<input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+" >
<input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >

<div class="imageBox">
    <div class="thumbBox"></div>

</div>

</body>
</html>

<script type="text/javascript">
//// 1.定义相关变量////////////////
//设置 indexedDB 的兼容性

var dbName="test";
var dbVersion=5;

// 删除数据库
function deleteIndexedDb (dbName) {
var indexedDb = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;

if (!indexedDb) {
alert("您的浏览器不支持indexedDB");
return;
}

indexedDb.deleteDatabase(dbName);
}

//打开数据库
function openIndexedDb (dbName, dbVersion,errorCallback,successCallback) {
var indexedDb = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;

if (!indexedDb) {
alert("您的浏览器不支持indexedDB");
return;
}

if(!dbVersion){
dbVersion = 1;
        }
// var idbRequest = window.indexedDB.open(name, version);
//打开或创建数据库
// var idbRequest = window.indexedDB.open(dbName, dbVersion);
var idbRequest = indexedDb.open(dbName, dbVersion);

idbRequest.onerror = function(e){
console.warn('error: %s', e.currentTarget.error.message);
if(errorCallback){
errorCallback();
            }
};

idbRequest.onsuccess = function(e){
console.log('openIndexedDb : %o', e.target);
db = e.target.result; //这里才是 indexedDB对象
if(successCallback){
successCallback(db);
}
};

// 注意: 只能请求>=当前数据库版本号的版本
// 大于当前版本号, 则触发 onupgradeneeded,
// 小于当前版本号，则触发 onerror
idbRequest.onupgradeneeded = function(e){
console.log('IndexedDb version change to ' + dbVersion);
var db = e.target.result;

//数据库新建成功以后，新增一张叫做dataList的表格，主键是key。
var objectStore = db.objectStoreNames.contains('dataList');
if (!objectStore) {
db.createObjectStore('dataList', {
keyPath: "key",
});
}
};

}

function setData(db,key,value,timeEnd,errorCallback,successCallback) {
var transaction = db.transaction(['dataList'], 'readwrite');
var objectStore = transaction.objectStore('dataList');
var request = objectStore.put({ key: key, value: value, timeEnd:timeEnd });

request.onsuccess = function (event) {
console.log('setData onsuccess : %o',event);
if(successCallback){
successCallback();
}
};

request.onerror = function (event) {
console.log('setData onerror : %o',event);
if(errorCallback){
errorCallback();
}
}
}

function getData(db,key,errorCallback,successCallback) {
var transaction = db.transaction(['dataList']);
var objectStore = transaction.objectStore('dataList');
var request = objectStore.get(key);
request.onerror = function(event) {
console.log('getData onerror : %o',event);
if(errorCallback){
errorCallback();
}
    };

request.onsuccess = function( event) {
console.log('getData onsuccess : %o',event);
console.log('getData onsuccess : %o',request.result);

if(successCallback){
successCallback(request.result.value,request.result.timeEnd);
}
};
}

// 删除数据
function deleteData(db,key,errorCallback,successCallback,) {
var transaction = db.transaction(['dataList'], 'readwrite');
var objectStore = transaction.objectStore('dataList');
var request = objectStore.delete(key);
request.onerror = function(event) {
console.log('getData onerror : %o',event);
if(errorCallback){
errorCallback();
}
};

request.onsuccess = function( event) {
console.log('getData onsuccess : %o',event);
if(successCallback){
successCallback(request.result.value,request.result.timeEnd);
}
};

}

// 清空数据
function clearData(db,key,errorCallback,successCallback,) {
var transaction = db.transaction(['dataList'], 'readwrite');
var objectStore = transaction.objectStore('dataList');
var request = objectStore.clear();
request.onerror = function(event) {
console.log('getData onerror : %o',event);
if(errorCallback){
errorCallback();
}
};

request.onsuccess = function( event) {
console.log('getData onsuccess : %o',event);
if(successCallback){
successCallback(request.result.value,request.result.timeEnd);
}
};
}

openIndexedDb(dbName,dbVersion,function errorCallback(){},function successCallback(db){
setData(db,"key1",{id:'test'},1500);

getData(db,"key1",null,function successCallback(data){
console.log('data: %o',data);
        })
});

</script>

分享到：

前端格式化工具与检测工具选择与使用 | 架构设计原理

2021-03-24 08:36
浏览 496
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

indexedDb TEST

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

indexedDb TEST

评论

发表评论

相关推荐

定时调用函数功能实现

uniApiJs

百度人脸识别

点击DIV触发上传文件的方法

前端格式化工具与检测工具选择与使用

defineProperty Array push 监听

weuiJsLayer.js

dataViewCommonJs

editorconfig配置

commonJs

setFormData

test11223

longKey

jQuery Validate 校验

移动端调试神器

高德地图获取地址

textarea 特殊字符串处理

前端实现从剪贴板中获取数据

js prototype原理与使用

JS过滤树数据

最近访客更多访客>>