有些安全性不太主要的數據，我不想花大氣力搞一台服務器，再裝置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作風的接口，讓它異常可愛😊- 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()