Храним все данные на сервере и получаем их в нужный момент.
Недавно мы делали собственные менеджер задач, потом текстовый редактор и страницу с шаблонами ответов на письма. Они отлично работают, но только в пределах одного браузера. Все они хранили данные либо внутри самого документа, либо в отсеке Localstorage — это специальная память браузера, которая привязана к конкретной странице. Данные — это наши тексты, шаблоны, задачи, то есть всё то полезное, ради чего мы эти программы заводили.
❌Проблема: эти данные неудобно хранить. Если они в документе, их нужно вписывать туда вручную через редактор кода. А если данные в LocalStorage, то мы уже не можем сменить браузер или зайти с мобилки — данные не будут доступны.
✅Чтобы решить эту проблему, разработчики придумали специальный формат передачи данных на сервер и обратно — JSON (JavaScript Object Notation). Можно перевести как «способ записи объектов в JavaScript». Формат оказался настолько удобен, что его стали поддерживать практически все популярные языки программирования.
Как устроен этот формат
Допустим, у нас есть магазин с системой бонусов, которые начисляются по скидочной карте. Когда продавец считывает карту, он должен получить от сервера такие данные:
- имя,
- фамилию,
- телефон,
- город,
- возраст,
- количество бонусных баллов,
- три предыдущие покупки (чтобы порекомендовать к ним что-то подходящее).
А теперь посмотрите на JSON-ответ, который получит продавец после считывания карты:
Общее правило такое: сначала всегда идёт название какого-то поля, а через двоеточие — его значение. Названия всегда берутся в двойные кавычки, строковые значения — тоже.
Ещё есть такое:
- вложенные объекты берутся в фигурные скобки;
- массивы берутся в прямоугольные скобки;
- после каждой пары «свойство: значение» должна стоять запятая (в самом конце — не ставится).
Так как JSON — универсальный формат передачи данных, то он может работать только с теми данными, которые есть в большинстве языков:
- строки — тоже, как и названия, берутся в двойные кавычки;
- числа, можно дробные;
- логические значения true или false; массивы или объекты.
То, что не входит в этот список, JSON не обработает и не выдаст сообщение об ошибке, потому что JSON — это просто формат данных и за его правильностью должен следить программист.
Как работать с JSON в JavaScript
Для работы с этим форматом в JavaScript есть две специальные команды:
- JSON.stringify() — переводит объект в JSON-строку, которую можно отправить на сервер;
- JSON.parse() — наоборот, разбирает JSON-данные на составляющие и отправляет их в нужные переменные или объекты.
Попробуем сделать то же самое, о чём мы говорили в примере про продавца, но на JavaScript. Чтобы было удобнее работать, мы заведём отдельный объект, где будем хранить все текущие параметры покупателя. После этого мы:
- заполним все данные в объекте вручную;
- переведём его в JSON;
- посмотрим, как выглядит результат;
- переведём JSON обратно в объект и убедимся, что всё прошло как нужно.
Сам код можно запустить в консоли браузера, чтобы увидеть результат работы программы.
Что дальше
Теперь нам нужно разобраться с тем, как отправлять и принимать наши JSON-данные с помощью запросов. Заодно научимся сами программировать нужное поведение сервера, чтобы он хранил наши данные и отдавал их в нужный момент. Подписывайтесь, и мы вам обо всём сообщим. Можно на наш Телеграм: @thecode.media