不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. webapi框架搭建-安全机制(一)

    本系列博客链接:webapi框架搭建系列博客 前言 webapi接口是开放给外部使用的,包括接口的地址,传参的规范,还有返回结果的说明.正因为接口的开放性,使得接口的安全很重要.试想一下,用抓包工具( ...

  2. java 修饰符总结

    java中的修饰符分为类修饰符,字段修饰符,方法修饰符.根据功能的不同,主要分为以下几种.    1.权限访问修饰符    public,protected,default,private,这四种级别 ...

  3. 把JS和CSS合并到1个文件

    合并JS文件和CSS文件很多人都知道,也用过,目的是为了减少请求数.但有时候我们觉的把JS合并到1个文件,CSS又合并到另外1个文件也是浪费,我们如何能把CSS和JS一起合并进1个文件了? 这里需要使 ...

  4. ETL 自动化测试框架

    分享个自己最近在做的自动化测试框架架构图. 数据的测试,入口一般定时任务.可添加参数选择执行任务的范围,也可以选择默认的执行范围.验证测试的为etl测试.数据库中的字段校验(通过对应关系.接口或者SQ ...

  5. 【BZOJ】2655: calc 动态规划+拉格朗日插值

    [题意]一个序列$a_1,...,a_n$合法当且仅当它们都是[1,A]中的数字且互不相同,一个序列的价值定义为数字的乘积,求所有序列的价值和.n<=500,A<=10^9,n+1< ...

  6. 【leetcode 简单】 第八十一题 4的幂

    给定一个整数 (32 位有符号整数),请编写一个函数来判断它是否是 4 的幂次方. 示例 1: 输入: 16 输出: true 示例 2: 输入: 5 输出: false 进阶: 你能不使用循环或者递 ...

  7. python 进程 线程 协程

    并发与并行:并行是指两个或者多个事件在同一时刻发生:而并发是指两个或多个事件在同一时间间隔内发生.在单核CPU下的多线程其实都只是并发,不是并行. 进程是系统资源分配的最小单位,进程的出现是为了更好的 ...

  8. [转]caffe中solver.prototxt参数说明

    https://www.cnblogs.com/denny402/p/5074049.html solver算是caffe的核心的核心,它协调着整个模型的运作.caffe程序运行必带的一个参数就是so ...

  9. vue中使用localStorage存储信息

    一 什么是localStorage 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionSto ...

  10. Exif xss

    这种XSS出现的状况会特别少. Exif是啥??? 可交换图像文件格式(英语:Exchangeable image file format,官方简称Exif),是专门为数码相机的照片设定的,可以记录数 ...