`
huangyongxing310
  • 浏览: 494077 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

indexedDb TEST

 
阅读更多
<!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">

<!--    <link rel="stylesheet" href="./cropbox.css" rel="stylesheet" />-->

    <script src="../miniui/scripts/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="./commonJs.js" type="text/javascript"></script>
<!--    <script src="./cropbox.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>


分享到:
评论

相关推荐

    indexeddb-typetest-js:测试浏览器是否支持 String、Object、Array、Blob、Uint8Array 和 ArrayBuffer 类型的 IndexedDB

    indexeddb-typetest-js 测试浏览器是否支持 String、Object、Array、Blob、Uint8Array 和 ArrayBuffer 类型的 IndexedDB。 还测试从数据库中检索每种类型需要多长时间。

    fakeIndexedDB:IndexedDB API的纯JS内存中实现

    安装npm install --save-dev fake-indexeddb 或者yarn add --dev fake-indexeddb用从功能上讲,它与IndexedDB完全一样,只是数据没有持久化到磁盘上。 最简单的使用方法是导入fake-indexeddb/auto ,这会将所有...

    ember-cli-indexeddb:余烬数据-> indexeddb

    Ember-cli-indexeddb 此自述文件概述了在此 Ember 插件上进行协作的详细信息。 安装 git clone这个仓库 npm install bower install 跑步 ember server 在访问您的应用程序。 运行测试 ember test ember test --...

    IndexSQL:通过使其与诸如sintaxis之类SQL兼容来简化IndexedDB的使用的项目

    IndexSQL是一种工具,可通过使其类似于SQL来帮助使用IndexedDB。 它的用法很简单: var indexSQL=new IndexSQL("demo"); indexSQL.execute("CREATE TABLE test (column1 STRING, column2 BOOLEAN, column3 NUMBER);...

    vue-idb-仅使用IndexedDB(Dexie.js)或自动创建且可扩展的vuex模块进行列表和大型列表管理-Vue.js开发

    new VueIdb({版本:1,数据库:'test',模式:[{测试: 'id,title,created_at,updated_at'},{posts:'id,owner'}]})new Vue({el:'#app',idb:idb,render:h =&gt; h(App)})0.2 .0 BUGFIX关于在现有DB ...

    异步资源加载Yepnope.js.zip

    test : Modernizr.indexeddb, yep : ['/js/indexeddb-wrapper.js', '/css/coolbrowser.css'], nope : ['/js/polyfills/lawnchair.js', '/js/cookies.js', '/css/oldbrowser.css'] } ]); 标签:Yepnope

    market-list-app:使用React.js,IndexedDB和Dexie.js构建的市场列表应用程序,用于离线存储

    yarn test 在交互式监视模式下启动测试运行器。 有关更多信息,请参见关于的部分。yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且...

    test_[removed]在线存储javascript

    总的来说,这个主题涵盖了JavaScript在浏览器环境中进行数据存储的多种方法,包括简单的Web存储API、复杂的IndexedDB以及实时通信的WebSocket技术。通过这些技术,开发者能够创建功能丰富的、离线可用的Web应用程序...

    Test Blog

    博主可能通过实例展示了HTML5的新特性,比如创建响应式网页设计,或者利用Web Storage和IndexedDB实现数据存储,或者是讲解如何使用WebSocket实现双向实时通信。 在这样的博客中,读者可能会学到: 1. HTML5的基础...

    能够识别浏览器是否处于隐身模式

    const openRequest = indexedDB.open('test', 1); openRequest.onerror = () =&gt; { return true; // 错误发生,可能在隐身模式 }; openRequest.onsuccess = () =&gt; { testDB = openRequest.result; testDB....

    websql使用

    后来,W3C进行了标准化工作,但最终在2010年决定不再推进,推荐使用IndexedDB作为替代。然而,由于历史原因,Chrome和一些旧版本的Android浏览器仍支持WebSQL。 ### 二、基本概念 1. **数据库**:每个WebSQL数据库...

    Skygate-Test-2018:Skygate实习(最佳解决方案)

    将应用程序状态保存在IndexedDB中 图形用户界面 自述文件 附加功能 在客户端测试 在服务器上测试 Google API(自动填充,地图) 文件API 良好的用户界面和动画 天数计数器 数据持久性 下载用户的位置并...

    periodo-client:客户端浏览和编辑PeriodO数据

    与所有支持ES2017和IndexedDB的浏览器兼容。 Safari有遵守后者的已知问题,我们不能保证PeriodO支持它(截至2017年3月)。建造要构建可从静态Web目录运行的独立版本的客户端,请运行make production 。 运行make ...

    testtest-21.github.io

    14. **Web API**:浏览器提供的接口,如Fetch API用于HTTP请求,Web Storage和IndexedDB用于客户端存储,Web Workers用于后台计算等。 15. **Web Components**:原生的自定义元素和组件系统,让开发者可以创建可...

    token-test-js

    测试应确保Token的安全存储策略,如使用HTTP-only cookies或IndexedDB。 6. **API交互**:在JavaScript中,经常通过AJAX或Fetch API向服务器发送请求并附带Token。测试这部分内容涉及验证Token是否正确附加到请求头...

    什么是跨域?跨域解决方法.docx

    1. 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB。 2. 无法接触非同源网页的 DOM。 3. 无法向非同源地址发送 AJAX 请求。 五、跨域解决方法 1. 设置 document.domain 解决无法读取非同源网页的 Cookie...

    e-learning-test:电子学习测试

    另外,JavaScript还可以实现数据持久化,比如利用本地存储或IndexedDB,使得用户的学习进度、偏好设置等信息能在不同会话间保持。这对于提供个性化的学习路径和推荐系统至关重要。 在测试方面,JavaScript有许多...

    movie-finder:查找并保存您必须观看的电影:movie_camera:

    该应用程序为您提供电影结果,您可以在浏览器中查看或保存该结果(indexedDb)。 通过此录制,您可以在“我的电影”部分中找到您的电影。 开发人员 使用React并使用IndexedDb API进行数据存储的应用程序。 不要...

    meteor-offline-test

    离线功能的实现往往依赖于浏览器的离线存储技术,如HTML5的Application Cache或IndexedDB。在“meteor-offline-test”中,可能使用了这些技术来存储联系人信息,确保在无网络连接时用户仍能查看和编辑联系人。当网络...

    dht-client:用于DHT连接的客户端库

    样例模块项目 具有文件夹结构,测试等的示例Javascript模块。...由于无头浏览器(如PhantomJS)不支持诸如IndexedDB (自PhantomJS 1.9.x起)之类的尖端HTML5 API,因此测试现在可以在浏览器窗口中运行。

Global site tag (gtag.js) - Google Analytics