摘要

简单场景描述：将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. git —— 标签

    标签:为分支添加一个可读标识. 1.创建标签 操作步骤: 切换到需要打标签的分支上 $ git branch $ git checkout master 为当前分支新增一个标签 $ git tag v ...

  2. python+selenium第一步 - 环境搭建

    刚开始学习一门技术,肯定是要从环境搭建开始的,我也不例外. 首先选择需要安装的版本,我使用的是mac自带的2.7版本. selenium2,和火狐浏览器 为求稳定不会出现未知问题,我选择了seleni ...

  3. 调研助力4S店，解码困境谜团

    关键词————4S店.汽车.销售.精准营销.闭环.用户满意度.精细化管理 一.背景 4S店是“四位一体”的汽车销售专卖店,包括了整车销售.零配件供应.售后服务.信息反馈四项功能. 信息化管理 精细化管 ...

  4. 怎么区分MSSQL中nvarchar和varchar的区别？

    怎么区分MSSQL中nvarchar和varchar的区别呢?下面两段代码可以帮你看到他们的区别. declare @s Nvarchar(10) set @s='那么相当于abcd可以存储多少个汉字 ...

  5. 容器计划任务大坑：在alpine容器里，想用非root帐号执行crontab任务

    我只能说抱歉,我前前后后测试了七天, 将自己预想的配置错误,一个一个去验证. 非root帐号在alpine容器里执行crontab任务,还是失败, 输出依旧是一片空白~ stackoverflow里, ...

  6. spring-boot分环境打包为jar包

    1.pom配置 <!-- 多环境打包 start --> <profiles> <!-- 开发环境配置 --> <profile> <id> ...

  7. 设置Loadrunner负载机临时文件目录

    设置Loadrunner负载机临时文件目录 最近在跑稳定性测试 3 X 24小时的时候,发现负载机产生的日志还运行记录等等竟然有100多G! C盘空间不足,但是D盘还有700多G空间呢,怎么让临时文件 ...

  8. codeforces Educational Codeforces Round 9 E - Thief in a Shop

    E - Thief in a Shop 题目大意:给你n ( n <= 1000)个物品每个物品的价值为ai (ai <= 1000),你只能恰好取k个物品,问你能组成哪些价值. 思路:我 ...

  9. wampserver的安装和使用

    首先想说一下通常搭建WAMP平台的时候主要分为散装包搭建和集成包搭建过程. 散装包搭建就是把PHP,Apache,MySQL等下载下来,一个个的安装,其过程灰常的复杂,而且需要配置的系统变量和修改的文 ...

  10. Inno Setup使用

    Inno Setup是一个开源的安装包打包软件,下载地址是:http://www.jrsoftware.org/isdl.php 使用引导界面创建一个安装包打包 配置参考官方文档:http://www ...