资讯专栏INFORMATION COLUMN

浏览器端数据库存储方案的整理 -- indexDB 和 localStorage

NusterCache / 1207人阅读

摘要:简介离线存储,提供强大的封装专业封装给封装类似类似接口如果你熟悉那一定会用使用类似的接口操作基于的浏览器端数据库基于的浏览器端数据库小型数据库,浏览器端基于风格的接口,让它非常可爱

查看原文

有些安全性不太重要的数据,我不想花大力气搞一台服务器,再安装mysql或者 monogdb,再写点rest接口。这也太麻烦了,浏览器里本来就有很好用的数据库。你为什么不尝试一下呢?
1. 客户端存储目前有两个方案比较
方案 优点 缺点
localStorage 简单易用,同步操作 存储容量小,一般不超过10MB
indexDB 接口都是异步的,操作不便 容量比localStorage大

如果要使用localStorage,那么存储量比较小。如果是用indexDB,那么最好找点开源库,直接封装友好的API, 来方便我们使用indexDB。

下面介绍一些很好用的的库。

2. 简介 2.1. localForage

离线存储, 提供强大的API封装IndexedDB,WebSQL,localStorage

12073 star

https://github.com/localForag...

localforage.setItem("key", "value", function (err) {
  // if err is non-null, we got an error
  localforage.getItem("key", function (err, value) {
    // if err is non-null, we got an error. otherwise, value is the value
  });
});
2.2. Dexie.js

专业封装 IndexedDB

3040 star

https://github.com/dfahlander...

    const db = new Dexie("MyDatabase");

    // Declare tables, IDs and indexes
    db.version(1).stores({
        friends: "++id, name, age"
    });

      // Find some old friends
    await db.friends
        .where("age")
        .above(75)
        .toArray();

    // or make a new one
    await db.friends.add({
        name: "Camilla",
        age: 25,
        street: "East 13:th Street",
        picture: await getBlob("camilla.png")
    });
2.3. zangodb

给HTML5 IndexedDB 封装类似mongodb类似接口, 如果你熟悉mongodb, 那一定会用zangodb

688 star

https://github.com/erikolson1...

let db = new zango.Db("mydb", { people: ["age"] });
let people = db.collection("people");

let docs = [
    { name: "Frank", age: 20 },
    { name: "Thomas", age: 33 },
    { name: "Todd", age: 33 },
    { name: "John", age: 28 },
    { name: "Peter", age: 33 },
    { name: "George", age: 28 }
];

people.insert(docs).then(() => {
    return people.find({
        name: { $ne: "John" },
        age: { $gt: 20 }
    }).group({
        _id: { age: "$age" },
        count: { $sum: 1 }
    }).project({
        _id: 0,
        age: "$_id.age"
    }).sort({
        age: -1
    }).forEach(doc => console.log("doc:", doc));
}).catch(error => console.error(error));
2.4. JsStore

使用类似 sql的接口操作 indexDB

74 star

https://github.com/ujjwalgupt...

var value = {
    column1: value1,
    column2: value2,
    column3: value3,
    ...
    columnN: valueN
};

connection.insert({
    into: "TABLE_NAME",
    values: [Value], //you can insert multiple values at a time

}).then(function(rowsAffected) {
    if (rowsAffected > 0) {
        alert("Successfully Added");
    }
}).catch(function(error) {
    alert(error.message);
});
2.5. minimongo

基于localstorage的浏览器端mongodb数据库

697 star

https://github.com/mWater/min...

// Require minimongo
var minimongo = require("minimongo");

var LocalDb = minimongo.MemoryDb;

// Create local db (in memory database with no backing)
db = new LocalDb();

// Add a collection to the database
db.addCollection("animals");

doc = { species: "dog", name: "Bingo" };

// Always use upsert for both inserts and modifies
db.animals.upsert(doc, function() {
    // Success:

    // Query dog (with no query options beyond a selector)
    db.animals.findOne({ species:"dog" }, {}, function(res) {
        console.log("Dog"s name is: " + res.name);
    });
});
2.6. pouchdb

基于indexDB的CouchDB-style浏览器端数据库

10599 star

https://github.com/pouchdb/po...

var db = new PouchDB("dbname");

db.put({
  _id: "dave@gmail.com",
  name: "David",
  age: 69
});

db.changes().on("change", function() {
  console.log("Ch-Ch-Changes");
});

db.replicate.to("http://example.com/mydb");
2.7. lowdb

小型json数据库,浏览器端基于localStorage, lodash风格的接口,让它非常可爱

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107903.html

相关文章

  • 览器据库存储方案整理 -- indexDB localStorage

    摘要:简介离线存储,提供强大的封装专业封装给封装类似类似接口如果你熟悉那一定会用使用类似的接口操作基于的浏览器端数据库基于的浏览器端数据库小型数据库,浏览器端基于风格的接口,让它非常可爱 查看原文 有些安全性不太重要的数据,我不想花大力气搞一台服务器,再安装mysql或者 monogdb,再写点rest接口。这也太麻烦了,浏览器里本来就有很好用的数据库。你为什么不尝试一下呢? 1. 客户端存...

    wudengzan 评论0 收藏0
  • 览器缓存原理以及本地存储

    摘要:私有缓存就是用户专享的,各级代理不能缓存的缓存。代表使用内存中的缓存,则代表使用的是硬盘中的缓存,浏览器读取缓存的顺序为。 作为一名前端工作人员,前端的缓存知识是必须掌握的,因为一个网站打开网页的速度直接关系到用户体验,用户粘度,而提高网页的打开速度有很多方面需要优化,其中比较重要的一点就是利用好缓存,缓存文件可以重复利用,还可以减少带宽,降低网络负荷。 1 缓存 缓存从宏观上分为私有...

    roundstones 评论0 收藏0
  • 览器缓存原理以及本地存储

    摘要:私有缓存就是用户专享的,各级代理不能缓存的缓存。代表使用内存中的缓存,则代表使用的是硬盘中的缓存,浏览器读取缓存的顺序为。 作为一名前端工作人员,前端的缓存知识是必须掌握的,因为一个网站打开网页的速度直接关系到用户体验,用户粘度,而提高网页的打开速度有很多方面需要优化,其中比较重要的一点就是利用好缓存,缓存文件可以重复利用,还可以减少带宽,降低网络负荷。 1 缓存 缓存从宏观上分为私有...

    Rindia 评论0 收藏0
  • 览器缓存原理以及本地存储

    摘要:私有缓存就是用户专享的,各级代理不能缓存的缓存。代表使用内存中的缓存,则代表使用的是硬盘中的缓存,浏览器读取缓存的顺序为。 作为一名前端工作人员,前端的缓存知识是必须掌握的,因为一个网站打开网页的速度直接关系到用户体验,用户粘度,而提高网页的打开速度有很多方面需要优化,其中比较重要的一点就是利用好缓存,缓存文件可以重复利用,还可以减少带宽,降低网络负荷。 1 缓存 缓存从宏观上分为私有...

    inapt 评论0 收藏0

发表评论

0条评论

NusterCache

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<