Моя команда и я разрабатываем веб-приложение, в котором пользователь сможет отслеживать свои выбросы углерода на основе своих полетов и методов для них, чтобы компенсировать свои выбросы (будь то расчет количества деревьев, которые им нужно будет посадить, или оплата третьего сторона, чтобы компенсировать это для них). Во время работы над этим проектом моя команда и я пришли к выводу, что нам нужно получить значения локального хранилища, которые были установлены с помощью пользовательского ввода, когда пользователь находился на другой веб-странице.
Наконец-то пришли вопросы. Как мы должны были это сделать? Было ли что-то, что мы пропустили или что-то, чему мы еще не научились? К счастью, ответ был очень прост.
Согласно исследованиям, локальное хранилище сохраняется между сеансами браузера. Это означает, что если мы установим значение пользовательского ввода для ключа в локальном хранилище на одной странице, его можно будет получить на другой странице, над которой мы работаем!
В нашем случае у нас была начальная страница, на которой пользователь вводил свою информацию в форму, расположенную в модальном окне:
1. Сколько перелетов совершил пользователь.
2. Коды аэропортов для информации о его рейсах.
Используя эти входные данные, мы получили ответ от API и использовали эти данные для расчета следующего:
1. Суммарное расстояние полета от всех полетов.
2. Сколько углерода было выброшено в атмосферу за все время его поездки.
Как только значения расстояния полета и выбросов углерода были извлечены из извлеченных данных, мы установили их в локальное хранилище, как вы можете видеть во фрагменте кода ниже.
После того, как два значения были установлены в локальном хранилище, мы приступили к синтаксическому анализу значений и извлечению их на отдельной странице, где пользователи могли видеть свои результаты!
На изображении ниже показаны результаты, хранящиеся в локальном хранилище, которые отображаются в таблице на новой html-странице.
Концепция локального хранилища очень проста. Однако иногда это может вводить в заблуждение, заставляя пользователя полагать, что локальное хранилище предназначено только для этой конкретной веб-страницы (как мы изначально думали). Я надеюсь, что прочитав этот пост, я смог прояснить концепцию локального хранилища и помочь вам в ваших будущих проектах.
Спасибо, что нашли время, чтобы прочитать мой пост.
Удачного кодирования!
