[html5]使用localStorage兼容低版本Safari无法使用indexeddb的情况

摘要

简单场景描述：将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>
复制代码

结果

posted @   wolfy  阅读(2399)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手