# Получение данных из хранилища в React Router

Вы видите, что пока наше приложение статично. В этом и последующих уроках мы начнем его оживлять. Уже на ближайших уроках мы сможем добавлять продукты в список с помощью React Router.

В этом уроке мы, для начала, разберемся с получением данных из хранилища. Для локального хранения данных мы с вами будем использовать хранилище localForage (вы можете почитать о его использовании и преимуществах в статье или доке) - аналог LocalStorage, который поддерживают все современные браузеры. Фактически это объединение нескольких технологий хранилищ. При относительно легком использовании, оно позволяет хранить большие объемы данных, причем разных типов, в том числе и картинки. Давайте установим его в наш проект. Вбейте в терминале:

`npm i localforage`

Перезапустим наше приложение. В папке `src` мы создадим файл `forStorage.js`, в котором будут функции для работы с хранилищем.

Итак, начнем с функции загрузки продуктов из хранилища. Добавим в `forStorage.js` импорт библиотеки и напишем функцию `getProducts` для получения продуктов:

`import localforage from 'localforage'; export async function getProducts() { await someNetwork(); let products = await localforage.getItem('products'); if (!products) products = []; return products; }`

Ниже после кода функции мы также добавим код для `someNetwork`, имитируя задержки сети (до 0.7 секунды) для нормальной работы функций. Если наш продукт "закэширован", то функциях для работы с хранилищем задержки не будет, если нет, то будет задержка, вы увидите в дальнейшем, как это работает:

`let someCache = {}; async function someNetwork(key) { if (!key) { someCache = {}; } if (someCache[key]) { return; } someCache[key] = true; return new Promise((res) => { setTimeout(res, Math.random() * 700); });`

Возьмите приложение, созданное вами в заданиях к прошлым урокам. Установите в приложении хранилище localForage.

Пользуясь материалами урока, создайте файл `forStorage.js` и напишите в нем функцию `getStudents` для получения данных студентов из хранилища.

← →
↑