摘要

简单场景描述:将html5开发的app内嵌入ios app中,有部分数据,需要在本地存储,就想到使用浏览器的localstorage或者indexeddb,另外localstorage存储的方式是key,value的方式,并且value是字符串类型的,一般会将json字符串的方式保存,但用起来不太方便,在使用的时候需要转换为json对象。indexeddb存储的是文档类型,类似于mongodb的document。操作更方便。但对低版本的兼容性不太好。

解决办法

http://git.oschina.net/wolfy/indexed-store-db

通过下面的代码判断当前浏览器是否支持indexed db

window.indexedDB = window.indexedDB ||
window.mozIndexedDB ||
window.webkitIndexedDB ||
window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction ||
window.webkitIDBTransaction ||
window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange ||
window.webkitIDBKeyRange ||
window.msIDBKeyRange;
    var db = {
version: 1, // important: only use whole numbers!
isSupport: function () {// support indexeddb or not
if (!window.indexedDB)
return false;
return true;
},
......
}

一个例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/index-store-db-1.0.js"></script>
<script> var user1 = { id: 1, name: "wolfy", age: 20 };
var user2 = { id: 2, name: "wolfy", age: 20 };
//set local indexed db name
app.db.objectStoreName = "app_test";
//save data to indexed db
app.db.save(user1, function () {
console.log("Save success");
});
app.db.save(user2, function () {
console.log("Save success");
});
//query user by id
app.db.get(1, function (item) {
console.log("query success", item);
});
//query all user
app.db.getAll(function (items) {
console.log("query all success", items);
}); app.db.delete(1, function () {
console.log("delete success");
});
</script>
</head>
<body> </body>
</html>

结果

[html5]使用localStorage兼容低版本Safari无法使用indexeddb的情况的更多相关文章

  1. android 在使用ViewAnimationUtils.createCircularReveal()无法兼容低版本的情况下,另行实现圆形scale动画

    ViewAnimationUtils.createCircularReveal()的简介: ViewAnimationUtils.createCircularReveal()是安卓5.0才引入的,快速 ...

  2. [转]AppCompat 22.1,Goole暴走,MD全面兼容低版本

    AppCompat 22.1,Goole暴走,MD全面兼容低版本 分类: Android2015-04-24 09:48 1354人阅读 评论(0) 收藏 举报 android   目录(?)[+] ...

  3. 模拟实现兼容低版本IE浏览器的原生bind()函数功能

    模拟实现兼容低版本IE浏览器的原生bind()函数功能: 代码如下: if(!Function.prototype.bind){   Function.prototype.bind=function( ...

  4. fragment基础 fragment生命周期 兼容低版本

    fragment入门 ① 创建一个类继承Fragment 重写oncreateView方法 public class FirstFragment extends Fragment { @Overrid ...

  5. Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案

    Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案 解决方式:安装 "babel-polyfill" 即可. 命令:npm install --save-dev ...

  6. Fundebug前端JavaScript插件更新至1.8.0,兼容低版本的Android浏览器

    摘要: 兼容低版本Android浏览器,请大家及时更新. Fundebug前端BUG监控服务 Fundebug是专业的程序BUG监控平台,我们JavaScript插件可以提供全方位的BUG监控,可以帮 ...

  7. 兼容低版本IE浏览器的一些心得体会(持续更新)

    前言: 近期工作中,突然被要求改别人的代码,其中有一项就是兼容IE低版本浏览器,所以优雅降级吧. 我相信兼容低版本IE是许多前端开发的噩梦,尤其是改别人写的代码,更是痛不欲生. 本文将介绍一些本人兼容 ...

  8. 使用html5兼容低版本浏览器

    因为html5 新出的一些语义化的标签,在低版本浏览器下不能识别,举个例子,比如你写了一个 header 标签中,写了一段文本,在低版本浏览器下,肯定是能看到的,但是,那是他是不认识 header标签 ...

  9. 兼容低版本JS的Array.map方法

    前几天去别的公司面试遇到个这样的问题,兼容IE7下的Array.map方法,一脸蒙蔽.后面回来查了下资料发现.Array.map方法是ECMA-262 标准中新添加的方法,在低版本的JS中是木有的. ...

随机推荐

  1. Python基础 - Ubuntu+Nginx+uwsgi+supervisor部署Flask应用

    网上找了许多讲关于Flask应用部署的文章几乎都是一个helloworld的Demo,按照helloworld来部署都没问题,但实际项目部署时还是遇到了不少问题.在这里简单写下自己成功部署的过程,防止 ...

  2. Codeforces 264B Good Sequences(DP+素数筛)

    题目链接:http://codeforces.com/problemset/problem/264/B 题目大意:给出n个单调递增的数,让你找出最长的好序列,好序列是一种单调递增的并且相邻元素的最大公 ...

  3. Luogu P1535 【游荡的奶牛】

    搜索不知道为什么没有人写bfs觉得挺像是标准个bfs的 状态因为要统计次数,不能简单地跳过一个被经过的点这样的话,状态量会爆炸采用记忆化设dp[i][j][k]表示在第k分钟到达点(i,j)的方案数以 ...

  4. SQL中的left outer join,inner join,right outer join用法详解

    这两天,在研究SQL语法中的inner join多表查询语法的用法,通过学习,发现一个SQL命令,竟然涉及到很多线性代数方面的知识,现将这些知识系统地记录如下: 使用关系代数合并数据1 关系代数合并数 ...

  5. .net/c#常用框架/中间件简介

    任务调度 Quartz.NET:Quartz.NET是一个开源的作业调度框架,非常适合在平时的工作中,定时轮询数据库同步,定时邮件通知,定时处理数据等. Quartz.NET允 许开发人员根据时间间隔 ...

  6. 学习Java你必须了解的知识

    1.什么是Java虚拟机?为什么Java被称作是平台无关的编程语言? Java虚拟机是一个可以执行Java字节码的虚拟机进程.Java源文件被编译成能被Java虚拟机执行的字节码文件.Java应用程序 ...

  7. day9--多线程与多进程

        线程:     什么是线程? 线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线 ...

  8. easyUI小技巧-纯干货

    一.显示分页(pagination:true)情况下,隐藏每页显示的记录条数的那个select(即pageList),下图箭头 方法1:onBeforeLoad:function(param){    ...

  9. Maven 仓库之阿里云镜像配置

    每当项目开发中 update Maven Project 的时候,我们会发现那个进度是非常的慢,这也严重阻碍了平日的开发进度.        然而,殊不知阿里云搭建了一个国内镜像 http://mav ...

  10. git推送本地仓库到github

    总结一下,方便后人,也方便自己查阅.直接写步骤 一.本地创建一个文件夹,在里面写项目的文件(* .php/*.js.....). git本地操作: 1 .  cd  /path/to/project  ...