Реализуйте базу данных в браузере для автономного использования

Если вы знакомы с Ларавель Красноречивыйэто будет выглядеть знакомо.

Мы собираемся использовать JS-библиотеку, очень похожую на Eloquent, которая называется собирать.js. С этим маленьким зверьком все, что вам нужно сделать, это использовать его для преобразования ваших данных в коллекцию Eloquent в JavaScript и использовать всю магию Eloquent во внешнем интерфейсе:

// Fake db (aka fake news)
import collect from 'collect.js';
 
const collection = collect({
    users: [
        { id: 1, firstname: 'Jane', lastname: 'Doe', gender: 'F' },
        { id: 2, firstname: 'John', lastname: 'Doe', gender: 'M' },
        { id: 3, firstname: 'Penelope', lastname: 'Cruz', gender: 'F' },
        { id: 4, firstname: 'Eva', lastname: 'Longoria', gender: 'F' },
        { id: 5, firstname: 'Cristiano', lastname: 'Penaldo', gender: 'M' }
    ],
 
    cities: [
        { id: 1, name: 'Sydney', country: 'Australia', humans: 4873217, kangaroos: 9321893, snakes: 22432645},
        { id: 2, name: 'Douala', country: 'Cameroon', humans: 5221943, kangaroos: 0, snakes: 2981023},
        { id: 3, name: 'Villetaneuse', country: 'France', humans: 32987, kangaroos: 0, snakes: 876432}
    ],
 
    friends: [],
    todos: [], // duh
    andSoOn: []
})
 
// Persist in localStore...
localStorage.setItem('fake_db', JSON.stringify(collection))

И вот, мой друг, вы сохранили всю свою поддельную базу данных в локальном хранилище. Если и когда вы перезагрузите страницу или закроете и снова откроете браузер, ваши данные не будут потеряны, и вы сможете запросить их в автономном режиме, как это

// Read and query fake_db
let fakeDB
const data = localStorage.getItem('fake_db')
if (data) {
    fakeDB = collect(JSON.parse(data))
}
 
const females = fakeDB.get('users').where('gender', 'F').all()
console.log(females) // (3) [{...}, {...}, {...}]
//The above array will contain users 1, 3 & 4

Как видите, это выглядит и ведет себя как вспомогательная функция из Laravel Collection. Вы можете обернуть это как услугу или использовать с одним из крутых детей, таких как Redux или vuex. Однако имейте в виду, что localStorage ограничен по размеру (МБ).

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *