美文网首页前端
基于浏览器端的数据存储方案

基于浏览器端的数据存储方案

作者: 若年 | 来源:发表于2019-02-22 15:14 被阅读0次

    客户端存储目前有两个方案比较


    image.png
    localStorage大家都很常用,这里就不说了,下面和大家说一下indexDB的存储限制和清理机制。

    浏览器存储的最大值是动态调整的,基于你的硬盘的大小. 全局限制的大小是硬盘空闲空间的 50%. 在火狐浏览器中, 可以使用Quota Manager内部工具来追踪每个域名使用了多少硬盘空间, 如果需要可以删除它们.

    当可用的磁盘填满了,磁盘容量管理器将会根据 LRU 策略清理数据 —— 最近最少使用的数据将会被优先删除,然后是第二个,直到浏览器不再超过限额。

    以下是一些常用的开源库,可以帮助我们更好的使用indexDB
    1. localForage
      离线存储, 提供强大的API封装IndexedDB,WebSQL,localStorage
    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.Dexie.js
    专业封装 IndexedDB

     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')
        });
    

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

    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));
    

    4.JsStore
    使用类似 sql的接口操作 indexDB

    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);
    });
    

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

    // 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);
        });
    });
    

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

    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');
    
    1. lowdb
      小型json数据库,浏览器端基于localStorage
    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()
    

    相关文章

      网友评论

        本文标题:基于浏览器端的数据存储方案

        本文链接:https://www.haomeiwen.com/subject/uhjeyqtx.html