- 浏览: 494077 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (502)
- Java (70)
- Linux (10)
- 数据库 (38)
- 网络 (10)
- WEB (13)
- JSP (4)
- 互联网 (71)
- JavaScript (30)
- Spring MVC (19)
- HTML (13)
- CSS (3)
- AngularJS (18)
- Redis (5)
- Bootstrap CSS (1)
- ZooKeeper (4)
- kafka (6)
- 服务器缓存 (4)
- Storm (1)
- MongoDB (9)
- Spring boot (16)
- log4j (2)
- maven (3)
- nginx (5)
- Tomcat (2)
- Eclipse (4)
- Swagger (2)
- Netty (5)
- Dubbo (1)
- Docker (7)
- Hadoop (12)
- OAuth (1)
- webSocket (4)
- 服务器性能 (7)
- Session共享 (1)
- tieye修改 (1)
- 工作 (1)
- 有用的语录 (0)
- https (2)
- common (5)
- 产品开发管理 (1)
- CDN 工作原理 (1)
- APNS、GCM (1)
- 架构图 (3)
- 功能实现分析 (1)
- JMX (1)
- 服务器相关操作命令 (1)
- img02 (0)
- 服务器环境搭建 (9)
- goodMenuBook (1)
- CEInstantPot (0)
- 有用数据 (1)
- 百度地图WEB API (2)
- 正则表达式 (1)
- 样式例子 (2)
- staticRecipePressureCooker.zip (1)
- jCanvas (1)
- 网站攻击方法原理 (1)
- 架构设计 (3)
- 物联网相关 (3)
- 研发管理 (7)
- 技术需求点 (1)
- 计划 (1)
- spring cloud (11)
- 服务器开发的一些实用工具和方法 (1)
- 每天学到的技术点 (4)
- Guava (1)
- ERP 技术注意要点 (2)
- 微信小程序 (1)
- FineRepor (1)
- 收藏夹 (1)
- temp (5)
- 服务架构 (4)
- 任职资格方案 (0)
- osno_test (1)
- jquery相关 (3)
- mybatis (4)
- ueditor (1)
- VueJS (7)
- python (10)
- Spring EL (1)
- shiro (1)
- 前端开发原理与使用 (7)
- YARN (1)
- Spark (1)
- Hbase (2)
- Pig (2)
- 机器学习 (30)
- matplotlib (1)
- OpenCV (17)
- Hystrix (1)
- 公司 (1)
- miniui (4)
- 前端功能实现 (3)
- 前端插件 (1)
- 钉钉开发 (2)
- Jenkins (1)
- elasticSearch使用 (2)
- 技术规范 (4)
- 技术实现原理 (0)
最新评论
<!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>
<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>
发表评论
-
定时调用函数功能实现
2021-06-11 10:26 1102<html> <head> & ... -
uniApiJs
2021-06-08 18:04 0//获取当前的地理位置、速度 function getLoca ... -
百度人脸识别
2021-05-21 16:11 360package com.gaojinsoft.htwy.y20 ... -
点击DIV触发上传文件的方法
2021-05-20 14:11 1190<div Style="float:left ... -
前端格式化工具与检测工具选择与使用
2021-05-10 20:26 714//工具安装前的准备与 ... -
defineProperty Array push 监听
2020-10-31 15:16 461<!DOCTYPE html> <html ... -
weuiJsLayer.js
2020-07-24 09:56 259var weuiJsAlterMap = {}; f ... -
dataViewCommonJs
2020-05-09 17:00 352// var _elementIdToDataMap={} ... -
editorconfig配置
2020-03-28 20:36 458# https://editorconfig.org root ... -
commonJs
2020-03-26 21:25 358//本包使用需要先引入jquery //获取数组中的重复元素 ... -
setFormData
2019-12-20 22:30 0function setFormData(selector,d ... -
test11223
2019-11-08 17:35 303nginx 的启动、停止与重 ... -
longKey
2019-12-05 17:23 290<!DOCTYPE html> <html ... -
jQuery Validate 校验
2019-09-25 21:16 322https://www.runoob.com/jquery/j ... -
移动端调试神器
2019-09-23 22:55 272<!DOCTYPE html> <html ... -
高德地图获取地址
2019-09-11 14:42 495高德帐号 135704744 <!doctype ... -
textarea 特殊字符串处理
2019-07-04 22:56 1141<!DOCTYPE html> <html ... -
前端实现从剪贴板中获取数据
2019-05-16 14:01 1461//绑定在了body上,也可以绑定在其他可用元素行,但是不是所 ... -
js prototype原理与使用
2018-08-14 15:59 763js prototype原理与使用 prototype 使您 ... -
JS过滤树数据
2018-07-02 16:45 1012<!DOCTYPE html> <html ...
相关推荐
indexeddb-typetest-js 测试浏览器是否支持 String、Object、Array、Blob、Uint8Array 和 ArrayBuffer 类型的 IndexedDB。 还测试从数据库中检索每种类型需要多长时间。
安装npm install --save-dev fake-indexeddb 或者yarn add --dev fake-indexeddb用从功能上讲,它与IndexedDB完全一样,只是数据没有持久化到磁盘上。 最简单的使用方法是导入fake-indexeddb/auto ,这会将所有...
Ember-cli-indexeddb 此自述文件概述了在此 Ember 插件上进行协作的详细信息。 安装 git clone这个仓库 npm install bower install 跑步 ember server 在访问您的应用程序。 运行测试 ember test ember test --...
IndexSQL是一种工具,可通过使其类似于SQL来帮助使用IndexedDB。 它的用法很简单: var indexSQL=new IndexSQL("demo"); indexSQL.execute("CREATE TABLE test (column1 STRING, column2 BOOLEAN, column3 NUMBER);...
new VueIdb({版本:1,数据库:'test',模式:[{测试: 'id,title,created_at,updated_at'},{posts:'id,owner'}]})new Vue({el:'#app',idb:idb,render:h => h(App)})0.2 .0 BUGFIX关于在现有DB ...
test : Modernizr.indexeddb, yep : ['/js/indexeddb-wrapper.js', '/css/coolbrowser.css'], nope : ['/js/polyfills/lawnchair.js', '/js/cookies.js', '/css/oldbrowser.css'] } ]); 标签:Yepnope
yarn test 在交互式监视模式下启动测试运行器。 有关更多信息,请参见关于的部分。yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且...
总的来说,这个主题涵盖了JavaScript在浏览器环境中进行数据存储的多种方法,包括简单的Web存储API、复杂的IndexedDB以及实时通信的WebSocket技术。通过这些技术,开发者能够创建功能丰富的、离线可用的Web应用程序...
博主可能通过实例展示了HTML5的新特性,比如创建响应式网页设计,或者利用Web Storage和IndexedDB实现数据存储,或者是讲解如何使用WebSocket实现双向实时通信。 在这样的博客中,读者可能会学到: 1. HTML5的基础...
const openRequest = indexedDB.open('test', 1); openRequest.onerror = () => { return true; // 错误发生,可能在隐身模式 }; openRequest.onsuccess = () => { testDB = openRequest.result; testDB....
后来,W3C进行了标准化工作,但最终在2010年决定不再推进,推荐使用IndexedDB作为替代。然而,由于历史原因,Chrome和一些旧版本的Android浏览器仍支持WebSQL。 ### 二、基本概念 1. **数据库**:每个WebSQL数据库...
将应用程序状态保存在IndexedDB中 图形用户界面 自述文件 附加功能 在客户端测试 在服务器上测试 Google API(自动填充,地图) 文件API 良好的用户界面和动画 天数计数器 数据持久性 下载用户的位置并...
与所有支持ES2017和IndexedDB的浏览器兼容。 Safari有遵守后者的已知问题,我们不能保证PeriodO支持它(截至2017年3月)。建造要构建可从静态Web目录运行的独立版本的客户端,请运行make production 。 运行make ...
14. **Web API**:浏览器提供的接口,如Fetch API用于HTTP请求,Web Storage和IndexedDB用于客户端存储,Web Workers用于后台计算等。 15. **Web Components**:原生的自定义元素和组件系统,让开发者可以创建可...
测试应确保Token的安全存储策略,如使用HTTP-only cookies或IndexedDB。 6. **API交互**:在JavaScript中,经常通过AJAX或Fetch API向服务器发送请求并附带Token。测试这部分内容涉及验证Token是否正确附加到请求头...
1. 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB。 2. 无法接触非同源网页的 DOM。 3. 无法向非同源地址发送 AJAX 请求。 五、跨域解决方法 1. 设置 document.domain 解决无法读取非同源网页的 Cookie...
另外,JavaScript还可以实现数据持久化,比如利用本地存储或IndexedDB,使得用户的学习进度、偏好设置等信息能在不同会话间保持。这对于提供个性化的学习路径和推荐系统至关重要。 在测试方面,JavaScript有许多...
该应用程序为您提供电影结果,您可以在浏览器中查看或保存该结果(indexedDb)。 通过此录制,您可以在“我的电影”部分中找到您的电影。 开发人员 使用React并使用IndexedDb API进行数据存储的应用程序。 不要...
离线功能的实现往往依赖于浏览器的离线存储技术,如HTML5的Application Cache或IndexedDB。在“meteor-offline-test”中,可能使用了这些技术来存储联系人信息,确保在无网络连接时用户仍能查看和编辑联系人。当网络...
样例模块项目 具有文件夹结构,测试等的示例Javascript模块。...由于无头浏览器(如PhantomJS)不支持诸如IndexedDB (自PhantomJS 1.9.x起)之类的尖端HTML5 API,因此测试现在可以在浏览器窗口中运行。