瀏覽器端數據庫存儲方案的整理 -- indexDB 和 localStorage

時間 2019-11-09

標籤瀏覽器數據庫存儲方案整理 indexdb localstorage 欄目瀏覽器简体版

原文原文鏈接

有些安全性不過重要的數據，我不想花大力氣搞一臺服務器，再安裝mysql或者 monogdb，再寫點rest接口。這也太麻煩了，瀏覽器裏原本就有很好用的數據庫。你爲何不嘗試一下呢？

1. 客戶端存儲目前有兩個方案比較

方案	優勢	缺點
localStorage	簡單易用，同步操做	存儲容量小，通常不超過10MB
indexDB	接口都是異步的，操做不便	容量比localStorage大

若是要使用localStorage，那麼存儲量比較小。若是是用indexDB，那麼最好找點開源庫，直接封裝友好的API, 來方便咱們使用indexDB。html5

下面介紹一些很好用的的庫。mysql

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風格的接口，讓它很是可愛😊
7997 star
https://github.com/typicode/l...

import low from 'lowdb'
import LocalStorage from 'lowdb/adapters/LocalStorage'

const adapter = new LocalStorage('db')
const db = low(adapter)

db.defaults({ posts: [] })
  .write()

// Data is automatically saved to localStorage
db.get('posts')
  .push({ title: 'lowdb' })
  .write()