Третий из проектов визуализации данных для скоростного забега Chingu FCC Speedrun Challenge был тем, где визуализация данных наконец-то заинтересовала меня. Этот проект был посвящен локальному хранилищу. Общая картина заключается в том, что приложению необходимо отслеживать некоторое количество рецептов, отслеживая их названия и ингредиенты, необходимые для их приготовления — решающее слово, данные должны сохраняться в локальном хранилище браузера, чтобы у пользователя была возможность выйти. их браузер, но если они вернутся позже, у них все еще будет доступ к тому же списку рецептов, который у них был раньше.
Требуемая функциональность:
- предварительно заполнить список рецептов при первом посещении пользователя
- разрешить пользователю добавлять новый рецепт
- разрешить пользователю редактировать существующий рецепт
- разрешить пользователю удалить существующий рецепт
Хранение данных в локальном хранилище с помощью Angular 2 проще, чем вы ожидаете:
window.localStorage работает так же, как и в простом ванильном JavaScript, поэтому получение и установка данных так же просты, как использование getItem() и setItem() в объекте window.localstorage.
Это значительно упростило работу с данными. Я просто рассматривал список рецептов как массив рецептов (для описания которого я создал класс), а затем поддерживал текущий массив и приводил его в строку, чтобы данные сохранялись в локальном хранилище.
Получение данных из модального окна было немного сложнее:
Честно говоря, большая часть времени, которое я потратил на этот проект, было посвящено созданию всплывающего диалогового окна, содержащего форму «новый/обновить рецепт», и передаче данных из него туда и обратно.
В конце концов, документация по Angular 2 Material содержала все, что мне было нужно — просто пришлось немного покопаться. Если вы пойдете по тому же пути, вот несколько вещей для поиска, которые могут сэкономить вам время:
- мддиалог
- Мддиалогконфиг
- MD_DIALOG_DATA
- NGModule — входные компоненты
- MdDialog — после закрытия()
Вы должны убедиться, что вы настроили конфигурацию для диалогового окна, чтобы вы могли использовать свойство data для отправки данных из него туда и обратно.
config: MdDialogConfig = {
disableClose: true,
width: '',
height: '',
position: {top: '',bottom: '',left: '',right: ''},
data: {}
}
После того, как вы разобрались с конфигурацией, вы можете открыть диалоговое окно и подписаться на его событие afterClosed.
addRecipe() {
this.maxRecipeId++;
this.config.data = { id: this.maxRecipeId, name: "", ingredients: "" };
let dialogRef = this.dialog.open(RecipeComponent, this.config);
dialogRef.afterClosed().subscribe((result: {id, name, ingredients}) => {
result.ingredients = result.ingredients.split(',');
this.recipes.push(result);
window.localStorage.setItem("p1xtRecipeBook", JSON.stringify(this.recipes));
});
}
Примечания:
- Вы можете просмотреть исходный код здесь
- Посмотреть живое демо можно на Surge.
- Вы можете найти Francesco Agnoletto (Kornil's) удивительное хранилище фавиконов здесь.
