不BB直接上代码

/*封装IndexdDB*/
var localDatabase = { };
localDatabase.dbName = "yiliDB";
localDatabase.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
localDatabase.db = null;
localDatabase.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;
localDatabase.IDBCursor = window.IDBCursor || window.webkitIDBCursor;
localDatabase.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
localDatabase.indexedDB.onerror = function(e) {
console.log("Database error: " + e.target.errorCode);
};
//删除数据库
localDatabase.deleteIndexdDB = function() {
var deleteDbRequest = localDatabase.indexedDB.deleteDatabase(localDatabase.dbName);
deleteDbRequest.onsuccess = function(event) {
console.log('Database deleted');
localDatabase.db = null;
};
deleteDbRequest.onerror = function(e) {
console.log("Database error: " + e.target.errorCode); };
};
//打开数据库
localDatabase.openIndexdDB = function(callback) {
console.log("init IndexdDB");
try {
var openRequest = localDatabase.indexedDB.open(localDatabase.dbName);
openRequest.onerror = function(e) {
callback("Database error: " + e.target.errorCode);
};
openRequest.onsuccess = function(event) {
localDatabase.db = openRequest.result;
console.log("Open IndexdDB success.");
callback("success");
localDatabase.db.onversionchange = function() {
console.log("DB close");
localDatabase.db.close();
}; };
openRequest.onupgradeneeded = function(evt) {
console.log('Creating object stores');
var MessageStore = evt.currentTarget.result.createObjectStore("message");
MessageStore.createIndex("userid", "userid", {
unique: false
}); }; } catch(e1) { console.log(e1); } };

再来个测试的例子

//添加消息
localDatabase.addMessageToIndexDB = function(obj, userid) {
try {
console.log(localDatabase.db);
if(localDatabase != null && localDatabase.db != null) {
var transaction = localDatabase.db.transaction("message", "readwrite");
var store = transaction.objectStore("message");
var request = store.get(userid);
request.onsuccess = function(e) {
var result = e.target.result;
var exist = 0;
if(typeof result != 'undefined') {
for(var i = 0; i < result.length; i++) {
if(result[i].userid == obj.userid) {
result[i] = obj;
exist++;
break;
}
}
if(!exist) {
result.push(obj);
}
store.put(result, userid);
} else {
store.add([obj], userid);
}
};
}
} catch(e) {
console.log(e)
}
};
//获取消息
localDatabase.getMessage = function(userid, callback) {
try { if(localDatabase != null && localDatabase.db != null) { var store = localDatabase.db.transaction("message").objectStore("message");
// var index = store.index("userid");
// var request = index.openCursor(IDBKeyRange.only(userid));
request = store.get(userid);
request.onsuccess = function(res) {
var result = res.target.result;
if(typeof result != 'undefined') {
callback(result);
} else {
callback(null);
} }; }
} catch(e) { console.log(e); } };

htm5本地存储方案——indexdb的封装的更多相关文章

  1. htm5本地存储方案——websql的封装

    一.websql 简介   在HTML5中,大大丰富了客户端本地可以存储的内容,添加了很多功能来将原本必须保存在服务器上的数据转为保存在客户端本地,从而大大提高了Web应用程序的性能,减轻了服务器端的 ...

  2. [转]App离线本地存储方案

    App离线本地存储方案 原文地址:http://ask.dcloud.net.cn/article/166 HTML5+的离线本地存储有如下多种方案:HTML5标准方案:cookie.localsto ...

  3. [转]Dcloud App离线本地存储方案

    原文地址:http://ask.dcloud.net.cn/article/166 HTML5+的离线本地存储有如下多种方案:HTML5标准方案:cookie.localstorage.session ...

  4. Android本地存储方案 SharedPreferences

    原文地址:http://www.yanwushu.com/post/43.html 存储位置 SharedPreferences数据保存在: /data /data/<package_name& ...

  5. JavaScript本地存储实践(html5的localStorage和ie的userData)

    http://www.css88.com/archives/3717 JavaScript本地存储实践(html5的localStorage和ie的userData) 发表于 2011年06月11日  ...

  6. 小强的HTML5移动开发之路(19)——HTML5 Local Storage(本地存储)

    来自:http://blog.csdn.net/dawanganban/article/details/18218701 一.浏览器存储的发展历程 本地存储解决方案很多,比如Flash SharedO ...

  7. web前端实现本地存储

    当我们在提及web前端本地存储的时候,首先需要介绍一下本地化存储的概念和历史.本地化存储从来不是一个新奇的概念,因为web应用程序一直在追求的就是媲美甚至超越桌面应用程序.但是桌面应用程序一直优于we ...

  8. 本地存储localStorage以及它的封装接口store.js的使用

    本地存储localStorage以及它的封装接口store.js的使用 sublime-text chrome javascript readyGo 2016年11月20日发布   0 推荐 9 收藏 ...

  9. HTML5 学习总结(三)——本地存储

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

随机推荐

  1. 转:UINavigationBar返回上一级出现nested pop animation can result in corrupted navigation bar

    [self.navigationController popViewControllerAnimated:NO]; 出现上面的错误是因为pop的时候要确保先让本页面加载完成,即如果在viewDidLo ...

  2. Codeforces Round #476 (Div. 2) [Thanks, Telegram!] C

    http://codeforces.com/contest/965/problem/C 题目大意:n个糖,k个人,每次最多只能拿M个糖,从第一个人开始拿,可以循环D次.问Arkady最多可以拿几块糖? ...

  3. 网站监控系统安装部署(zabbix,nagios)

    zabbix分布式监控系统安装部署 官方网站链接 https://www.zabbix.com/documentation/2.0/manual/installation 安装环境说明 参考地址 ht ...

  4. 13、Math类简介

    Math类概述 在java.lang包下,有个Math类,这个类包含用于执行基本数学运算的方法,如四舍五入,开方等等. package com.sutaoyu.usually_class; publi ...

  5. [转]softmax函数详解

    答案来自专栏:机器学习算法与自然语言处理 详解softmax函数以及相关求导过程 这几天学习了一下softmax激活函数,以及它的梯度求导过程,整理一下便于分享和交流. softmax函数 softm ...

  6. oracle数据类型表

    set SERVEROUTPUT ON declare v_char ); v_varchar2 ); begin v_char:='java'; v_varchar2:='java'; DBMS_O ...

  7. easyui表单提交验证form

    方式一,不需要考虑jquery.easyui.min.js版本 <script> $(function () { //针对 设置 novalidate:true $('.validateb ...

  8. pl/sql developer 设置oracle的date类型默认显示样式

    oracle里默认的date显示样式: 我的是汉化过的: 进入后,点击工具->首选项->日期/时间设置即可: 设置后在pl/sql developer中查看: 英文版的操作步骤: Tool ...

  9. centos7联网

    一般centos安装(在虚拟机上安装)完成后需要自己配置服务,下面我就讲下如何配置 配置联网步骤 首先,打开虚拟机的两个服务,右击我的电脑-->管理--->找到服务-->右击启动 两 ...

  10. OpenCV与Python之图像的读入与显示以及利用Numpy的图像转换

    1:读入图像,显示图像与保存图像 代码: import cv2 img=cv2.imread('lena.jpg',cv2.IMREAD_COLOR) cv2.namedWindow('lena',c ...