Введение
В этом Лаборатории мы сопровождаем Алекса, решительного веб-разработчика в бурящем технологическом стартапе, который сейчас отправляется в мир постоянства данных. После успешного создания механизма отслеживания и отображения финансовых записей в персональном финансовом трекере, следующая задача - обеспечить сохранение этих записей при переходе между сессиями браузера. Цель - позволить пользователям возвращаться в приложение и находить все ранее введенные данные в неизменном виде, повышая удобство использования приложения и удовлетворенность пользователей. Эта задача знакомит Алекса с концепцией веб-хранилища, в частности, с использованием API localStorage для сохранения и извлечения состояния приложения.
В этом Лаборатории вы научитесь использовать localStorage для локального хранения данных в браузере пользователя, обеспечивая сохранение данных в веб-приложениях.
Точки знания:
- Использование
localStorage - Сериализация и десериализация JSON (
JSON.stringify,JSON.parse)
LocalStorage
localStorage предоставляет механизм для хранения данных сессии на стороне клиента, при этом ограничение по размеру хранилища обычно составляет около 5 МБ. В отличие от сессионного хранилища (sessionStorage), данные в localStorage не исчезают при завершении сессии.
Сохранение данных
Метод setItem() позволяет сохранять данные в localStorage. Этот метод принимает два параметра: ключ и значение.
Например:
localStorage.setItem("username", "Alice");
Получение данных
Метод getItem() используется для чтения данных из localStorage. Этот метод принимает один параметр: ключ.
Например:
localStorage.setItem("username", "Alice");
let username = localStorage.getItem("username");
console.log(username); // Outputs: Alice
Сохранение записей в LocalStorage
В этом шаге вы будете работать с Алексом по реализации функциональности, которая сохраняет массив финансовых записей в localStorage при добавлении каждой новой записи. Это гарантирует, что данные пользователя хранятся локально на их устройстве и остаются доступными даже после закрытия или обновления браузера.
В начале файла script.js, перед определением функции addFinancialRecord, добавьте следующий код для загрузки сохраненных записей из localStorage и инициализации массива financialRecords:
Измените script.js для загрузки записей из localStorage:
document.addEventListener("DOMContentLoaded", function () {
let records = JSON.parse(localStorage.getItem("records")) || [];
});
- Статический метод
JSON.parse()разбирает JSON-строку, создавая JavaScript-значение или объект, описанный строкой. Можно передать необязательную функцию ревевера, чтобы выполнить преобразование над результирующим объектом перед его возвратом.
Реализовать сохранение записей
Добавьте логику для сохранения записи в localStorage в функции addRecord:
document.addEventListener("DOMContentLoaded", function () {
const saveRecords = () => {
localStorage.setItem("records", JSON.stringify(records));
renderRecords();
};
const addRecord = (description, amount, type) => {
records.push({ description, amount, type });
saveRecords();
};
});
Теперь, каждый раз, когда добавляется новая финансовая запись, она будет сохранена в localStorage, обеспечивая сохранение данных.
Далее, нам нужно реализовать функцию удаления записи из бухгалтерского учета. Перед написанием функции удаления нам нужно изучить новый метод операции с массивами.
Метод splice
Метод splice() может принимать три параметра: начальную позицию, количество элементов для удаления и новые элементы для добавления.
Синтаксис:
array.splice(start, deleteCount, item1, item2,...)
start: Индекс, с которого начать изменение массива.deleteCount: Количество элементов, которые нужно удалить. Если не нужно удалять элементы, это должно быть 0.item1, item2,...: Новые элементы, которые нужно добавить в массив.
Удаление элементов
Для удаления элементов из массива задайте параметр deleteCount без необходимости добавлять новые элементы.
let fruits = ["Apple", "Banana", "Cherry", "Date"];
fruits.splice(1, 2); // Удалить 2 элемента начиная с индекса 1
console.log(fruits); // Выводит: ['Apple', 'Date']
Добавление элементов
splice() также может добавлять элементы в определенную позицию в массиве без удаления элементов. Задайте deleteCount равным 0 и укажите элементы для добавления.
let fruits = ["Apple", "Banana", "Cherry"];
fruits.splice(2, 0, "Date"); // Добавить 'Date' по индексу 2
console.log(fruits); // Выводит: ['Apple', 'Banana', 'Date', 'Cherry']
Замена элементов
Задавая deleteCount и добавляя новые элементы, splice() может одновременно удалять и добавлять элементы, тем самым заменяя их.
let fruits = ["Apple", "Banana", "Cherry"];
fruits.splice(1, 1, "Date"); // Заменить 1 элемент по индексу 1 на 'Date'
console.log(fruits); // Выводит: ['Apple', 'Date', 'Cherry']
Добавить возможность удаления записей
Добавьте возможность удаления записей.
Напишите следующий код в файле script.js:
document.addEventListener("DOMContentLoaded", function () {
window.deleteRecord = (index) => {
records.splice(index, 1);
saveRecords();
};
});
Резюме
В этом практическом занятии вы и Алекс решили проблему сохранения данных в приложении для отслеживания личных финансов. Изучив использование API localStorage, вы научились сохранять и получать финансовые записи между сессиями браузера, значительно улучшив пользовательский опыт. Введение в веб-хранилище открывает новые возможности для создания более сложных и удобных веб-приложений.
На практике вы увидели, как данные могут быть сериализованы в строку с использованием JSON.stringify для хранения и затем десериализованы обратно в JavaScript-объекты с использованием JSON.parse для извлечения. Этот процесс важен для управления состоянием приложения в клиентской веб-разработке и формирует фундаментальные навыки, которые помогут вам в будущих проектах веб-разработки.
