{"time":1740489102340,"blocks":[{"id":"aks0QYjAX0","type":"paragraph","data":{"text":"Работа современных сайтов и приложений неизбежно связана с сохранением данных на стороне клиента. Эти данные применяются в других частях веб-ресурсов или используются в следующих сессиях. Например, на сайте онлайн-магазина пользователь сохраняет товары в корзине и завершает сессию. Когда он возвращается на сайт, он может продолжить покупку, не потеряв свои товары."}},{"id":"XoDpIJmeL6","type":"paragraph","data":{"text":"Как это реализуется на практике? Есть несколько способов работы с информацией. Наиболее востребованные из них — это cookies, localStorage и sessionStorage. Эти инструменты отличаются друг от друга, но далеко не все разработчики могут объяснить разницу между ними."}},{"id":"HFN6p52vE2","type":"paragraph","data":{"text":"Узнаем, что собой представляют cookies, localStorage и sessionStorage, каковы их основные характеристики и особенности, как они применяются и какой способ работы с данными лучше."}},{"id":"CExYDCa38Y","type":"header2","data":{"text":"Cookies","level":2},"tunes":{}},{"id":"adujsxXOpn","type":"paragraph","data":{"text":"На заре интернета cookies были безальтернативным вариантом хранения данных на стороне клиента. Файлы куки представляют собой элементарные пары типа «ключ-значение» и используются для:"}},{"id":"TnAWNfTbhq","type":"list","data":{"style":"unordered","items":["управления текущими сессиями;","персонализации пользователя;","отслеживания его активности. "]}},{"id":"GF20Itl-DE","type":"paragraph","data":{"text":"При этом данные не просто остаются в хранилище в браузере, но и передаются на серверы в виде HTTP-заголовков, выступая частью спецификации протокола. Cookies поддерживают все браузеры — это универсальный способ работы с информацией. И хотя объем данных для хранения ограничен, производительность этого способа — крайне важный показатель для работы современных веб-ресурсов."}},{"id":"ba7f1442-b98a-4b60-bcf6-9fbc427d656d","type":"banner-blank","data":{}},{"id":"xieUBCm0nM","type":"paragraph","data":{"text":"По сути куки — это ограниченные по размеру текстовые файлы, которые сайт сохраняет на устройстве пользователя. Объем данных в «печеньках» лимитирован — это не больше 4 КБ, при этом у них есть срок хранения, который устанавливает разработчик ресурса."}},{"id":"K3xr_Rs8V9","type":"hint","data":{"text":"Например, в Google есть файлы аналитики для сбора информации, которые хранятся от 6 до 24 месяцев. Некоторые cookies действуют только в период работы в браузере и при закрытии автоматически уничтожаются, другие хранятся в течение всего перерыва между сессиями — их срок жизни зависит от выполняемых задач.","fullWidth":true}},{"id":"CMRXEwYX-_","type":"paragraph","data":{"text":"Куки почти идеальный инструмент для идентификации посетителя, но сам пользователь может отключить их почти на любом ресурсе, что делает «печеньки» недостаточно надежным хранилищем информации."}},{"id":"79MbtSGEWY","type":"image","data":{"alt":"","title":"","caption":"","file":{"url":"https://media.tproger.ru/user-uploads/101078/2025-02-25/444a9012-6723-4a77-9166-14e4b8210d2f.png","id":46678},"stretched":false,"withBackground":false,"withBorder":false,"width":1200,"height":630,"optimizedFile":{"original":"https://media.tproger.ru/user-uploads/101078/2025-02-25/444a9012-6723-4a77-9166-14e4b8210d2f.png","alt":"Что такое cookies, localStorage и sessionStorage: главные отличия и примеры 1","dimensions":{"width":1200,"height":630},"additionalSizes":{"srcSet":[{"url":"https://tproger.ru/signed_image/WPx9lQ60uK1VgnWS4KT00WwDU3q0D-r5_dOvMifNlKU/rs:fill:766:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDEwNzgvMjAyNS0wMi0yNS80NDRhOTAxMi02NzIzLTRhNzctOTE2Ni0xNGU0YjgyMTBkMmYucG5n","dpr":1,"width":766},{"url":"https://tproger.ru/signed_image/N7QVHEII2benWSxYnizgE_maL3_VaArL27aPirRLtpk/rs:fill:1532:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDEwNzgvMjAyNS0wMi0yNS80NDRhOTAxMi02NzIzLTRhNzctOTE2Ni0xNGU0YjgyMTBkMmYucG5n","dpr":1,"width":1532},{"url":"https://tproger.ru/signed_image/fl3R39gVim9nXITfAqBFoHNm8oQ_XgiO5bQJ2UkVE10/rs:fill:686:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDEwNzgvMjAyNS0wMi0yNS80NDRhOTAxMi02NzIzLTRhNzctOTE2Ni0xNGU0YjgyMTBkMmYucG5n","dpr":1,"width":686},{"url":"https://tproger.ru/signed_image/clqOQqlnFfVpzHINfz8Zo5bJK58NcWRLU1VK61Wtu4I/rs:fill:1372:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDEwNzgvMjAyNS0wMi0yNS80NDRhOTAxMi02NzIzLTRhNzctOTE2Ni0xNGU0YjgyMTBkMmYucG5n","dpr":1,"width":1372},{"url":"https://tproger.ru/signed_image/rKED3xanwdAcqJdzDhgBKiJRteU7CWeR9mqLQCeMG3M/rs:fill:636:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDEwNzgvMjAyNS0wMi0yNS80NDRhOTAxMi02NzIzLTRhNzctOTE2Ni0xNGU0YjgyMTBkMmYucG5n","dpr":1,"width":636},{"url":"https://tproger.ru/signed_image/8ANaviIdVJhuPIRzgR3KGkuik8IrLfEntDi3qbI9UDk/rs:fill:1272:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDEwNzgvMjAyNS0wMi0yNS80NDRhOTAxMi02NzIzLTRhNzctOTE2Ni0xNGU0YjgyMTBkMmYucG5n","dpr":1,"width":1272},{"url":"https://tproger.ru/signed_image/TxlJVcjnWinPOgO5BRnjzEcbmnpRP4BDTrZZlmyEKqw/rs:fill:466:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDEwNzgvMjAyNS0wMi0yNS80NDRhOTAxMi02NzIzLTRhNzctOTE2Ni0xNGU0YjgyMTBkMmYucG5n","dpr":1,"width":466},{"url":"https://tproger.ru/signed_image/YrLUg2otHVp9ADtHaeYBV5Jr-X1MdBaFKt5pG3MvS2k/rs:fill:932:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDEwNzgvMjAyNS0wMi0yNS80NDRhOTAxMi02NzIzLTRhNzctOTE2Ni0xNGU0YjgyMTBkMmYucG5n","dpr":1,"width":932}],"sizes":[{"media":"(min-width: 1441px)","size":"766px"},{"media":"(min-width: 1281px)","size":"686px"},{"media":"(min-width: 1281px)","size":"766px"},{"media":"(min-width: 961px)","size":"766px"},{"media":"(min-width: 671px)","size":"636px"},{"media":"(min-width: 500px)","size":"466px"}]}}}},{"id":"bTeJpSvzXV","type":"paragraph","data":{"text":"Развитие этого инструмента продолжается. Например, в экосистеме Chromium доступна версия, которая поддерживает общую память и асинхронный API CookieStore — им можно пользоваться без блокировки главного потока."}},{"id":"DsuXkb_wCD","type":"paragraph","data":{"text":"Закрепим основные характеристики cookies:"}},{"id":"Vz1qrLKKI1","type":"list","data":{"style":"unordered","items":["сохраняют данные, которые передаются на сервер с помощью заголовков;","локальные и сессионные куки-хранилища существуют только на стороне клиента;","сроки хранения устанавливаются заранее при создании куков;","объем ограничен (4 КБ);","бывают защищенные куки, но в этом случае их содержимое будет недоступным на клиентской стороне — такой формат используется для аутентификации пользователей при хранении их токенов."]}},{"id":"Ok4fFvL9cP","type":"paragraph","data":{"text":"Способ хранения данных в cookies имеет определенные ограничения. Чтобы сохранить корректность запроса, содержимое должно быть закодированным и безопасным. При этом интерфейс для чтения и записи cookies не всегда удобный, что вынуждает разработчиков работать с ним не напрямую, а через сторонние библиотеки."}},{"id":"tOxSuYb2ic","type":"paragraph","data":{"text":"Этот способ применяют, чтобы сохранить данные авторизации либо когда доступ к сохраненным данным требуется на сервере. Кроме того, куки применяют компании, чтобы отслеживать поведение пользователей, но сами браузеры активно этому противодействуют."}},{"id":"ehiL7xZt9V","type":"paragraph","data":{"text":"Разработчики на JavaScript используют свойство document.cookie, которое предоставляет строковый формат для работы всех cookies, связанных с текущим процессом. Пример кода:"}},{"id":"O7wOIlnC4s","type":"code","data":{"code":"// Setting a cookie\ndocument.cookie = \"name=Mathew; expires=Thu, 1 Jan 2025 00:00:00 UTC; path=/\";\n\n// Retrieving a cookie\nconst cookies = document.cookie.split(\"; \");\ncookies.forEach(cookie => {\n const [key, value] = cookie.split(\"=\");\n console.log(key, value);\n});\n\n// Removing a cookie\ndocument.cookie = \"name=; expires=Thu, 2 Jan 1975 00:00:00 UTC; path=/\";\n","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"fdssr-t7I3","type":"paragraph","data":{"text":"В этом примере для установки cookie разработчик присваивает строку свойству document.cookie. Можно задать дополнительные свойства — например, срок действия, путь или домен."}},{"id":"b9739793-f60e-4c81-a849-2f7d84257635","type":"banner-blank","data":{}},{"id":"GkqnaBALkU","type":"paragraph","data":{"text":"У файлов cookie довольно широкая область применения — хранение настроек юзера, удержание посетителей сайта, хранение сведений о текущем сеансе, показ целевой рекламы. При этом файлы устанавливает конкретный сервер, и только он может их прочитать."}},{"id":"no6bl7-tCr","type":"paragraph","data":{"text":"Разработчики устанавливают и читают cookie через заголовки Set-Cookie и Cookie непосредственно в протоколе HTTP. В приложениях куки устанавливают и считывают с помощью соответствующего API либо модуля файлов cookie на одном из серверных языков — например, Node.js."}},{"id":"CylDCX3Hts","type":"paragraph","data":{"text":"Среди рядовых юзеров интернета бытует мнение, что куки вредны и опасны. Это не совсем верно. Сами по себе эти файлы не представляют угрозы для данных — они не содержат вирусы и не могут установить на устройство вредоносное ПО. Но если злоумышленники получат доступ к cookies на вашем устройстве, они будут знать все о сеансах конкретного посетителя и могут использовать эти сведения в своих целях."}},{"id":"mMChxLkmt4","type":"paragraph","data":{"text":"Существует риск, что при работе на компьютерах с публичным вай-фаем или при подключении через чужие взломанные устройства, личные данные могут быть похищены. Определенные уязвимости, связанные с cookie, могут возникать на сайтах онлайн-магазинов, которые уделили недостаточно внимания информационной безопасности."}},{"id":"1F_Rg5vYCt","type":"paragraph","data":{"text":"Чтобы минимизировать риски, юзеру при посещении незнакомых сайтов или при использовании публичных сетей лучше отказаться от автоматического приема куки-файлов. Альтернативный вариант — входить инкогнито."}},{"id":"Z7AE8RWxKn","type":"header2","data":{"text":"LocalStorage","level":2},"tunes":{}},{"id":"TwA_2xlCxQ","type":"paragraph","data":{"text":"Это более продвинутый формат хранилища в браузере, позволяющий сайтам сохранять больше информации без ущерба для трафика. LocalStorage создали в качестве альтернативы cookie, чтобы обойти ограничения последних. А именно — небольшой объем хранилища, необходимость постоянно передавать данные с сервера в браузер и обратно. В localStorage работа с данными стала проще и эффективнее."}},{"id":"8f67a89d-22f2-4714-8384-7d1c377e253b","type":"banner-blank","data":{}},{"id":"ojNwyjaZZ9","type":"paragraph","data":{"text":"В локальном хранилище, в отличие от сеансового, данные сохраняются после закрытия и повторного открытия страницы. Файлы работают до тех пор, пока пользователь их не очистит или это не сделает код на JavaScript."}},{"id":"zfPpXtBalW","type":"paragraph","data":{"text":"Информация хранится в формате «ключ-значение» в виде строк. Даже если ввести числовые или логические данные, они преобразуются в строчные. Для использования хранилища в JavaScript используют объект localStorage."}},{"id":"4OyIAbyYOQ","type":"image","data":{"alt":"","title":"","caption":"","file":{"url":"https://media.tproger.ru/user-uploads/101078/2025-02-25/07284145-9813-4c0b-aa55-b68172e7de1c.png","id":46679},"stretched":false,"withBackground":false,"withBorder":false,"width":800,"height":540,"optimizedFile":{"original":"https://media.tproger.ru/user-uploads/101078/2025-02-25/07284145-9813-4c0b-aa55-b68172e7de1c.png","alt":"Что такое cookies, localStorage и sessionStorage: главные отличия и примеры 2","dimensions":{"width":800,"height":540},"additionalSizes":{"srcSet":[{"url":"https://tproger.ru/signed_image/IlSX7bjQE7rDsgh9tHGyT_gM9eNZGN0xsJl2MyXmZOE/rs:fill:766:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDEwNzgvMjAyNS0wMi0yNS8wNzI4NDE0NS05ODEzLTRjMGItYWE1NS1iNjgxNzJlN2RlMWMucG5n","dpr":1,"width":766},{"url":"https://tproger.ru/signed_image/v9ftoprUwNtbz7dlSLznxnNSc3pRMWapmCSN2OetdUc/rs:fill:1532:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDEwNzgvMjAyNS0wMi0yNS8wNzI4NDE0NS05ODEzLTRjMGItYWE1NS1iNjgxNzJlN2RlMWMucG5n","dpr":1,"width":1532},{"url":"https://tproger.ru/signed_image/E-ON5ak8FvlW0oHJ-ptbWmSoRRCtmRu6snwWkSGm78w/rs:fill:686:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDEwNzgvMjAyNS0wMi0yNS8wNzI4NDE0NS05ODEzLTRjMGItYWE1NS1iNjgxNzJlN2RlMWMucG5n","dpr":1,"width":686},{"url":"https://tproger.ru/signed_image/ht6rPj9qWbiucz1RodzTC48eEAwvfvsEMHHdqutqGWc/rs:fill:1372:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDEwNzgvMjAyNS0wMi0yNS8wNzI4NDE0NS05ODEzLTRjMGItYWE1NS1iNjgxNzJlN2RlMWMucG5n","dpr":1,"width":1372},{"url":"https://tproger.ru/signed_image/WbDISoYVLtu_Ap1Y4pra3Dq2QU3a6arqg8u0qF3MAig/rs:fill:636:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDEwNzgvMjAyNS0wMi0yNS8wNzI4NDE0NS05ODEzLTRjMGItYWE1NS1iNjgxNzJlN2RlMWMucG5n","dpr":1,"width":636},{"url":"https://tproger.ru/signed_image/PS8IxcSR9FUf-CFU3xpnOhpLQYwebAAwUXeZlmH2IZo/rs:fill:1272:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDEwNzgvMjAyNS0wMi0yNS8wNzI4NDE0NS05ODEzLTRjMGItYWE1NS1iNjgxNzJlN2RlMWMucG5n","dpr":1,"width":1272},{"url":"https://tproger.ru/signed_image/Eb0EeJry4lhbOm-Yy0vpCCRCMeSl74vL9iqxvAJj55Q/rs:fill:466:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDEwNzgvMjAyNS0wMi0yNS8wNzI4NDE0NS05ODEzLTRjMGItYWE1NS1iNjgxNzJlN2RlMWMucG5n","dpr":1,"width":466},{"url":"https://tproger.ru/signed_image/6AbraQWg7FstU4oOZznd3NYyaPuk8s5wWSziHUNZsgw/rs:fill:932:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDEwNzgvMjAyNS0wMi0yNS8wNzI4NDE0NS05ODEzLTRjMGItYWE1NS1iNjgxNzJlN2RlMWMucG5n","dpr":1,"width":932}],"sizes":[{"media":"(min-width: 1441px)","size":"766px"},{"media":"(min-width: 1281px)","size":"686px"},{"media":"(min-width: 1281px)","size":"766px"},{"media":"(min-width: 961px)","size":"766px"},{"media":"(min-width: 671px)","size":"636px"},{"media":"(min-width: 500px)","size":"466px"}]}}}},{"id":"dFUG23tK9o","type":"paragraph","data":{"text":"Пример кода:"}},{"id":"b3VFLTklxq","type":"code","data":{"code":"// Storing data in local storage\nlocalStorage.setItem(\"name\", \"Mathew\");\nlocalStorage.setItem(\"age\", \"33\");\n\n// Retrieving data from local storage\nconst name = localStorage.getItem(\"name\");\nconst age = localStorage.getItem(\"age\");\n\nconsole.log(name); // Output: Mathew\nconsole.log(age); // Output: 33\n\n// Removing data from local storage\nlocalStorage.removeItem(\"age\");\n\n// Clearing all data from local storage\nlocalStorage.clear();\n","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"ehc5uyKy2G","type":"paragraph","data":{"text":"Запись напоминает код для сеансового хранилища. Метод setItem() используется для хранения данных, метод getItem() — для их получения, removeItem() — для удаления конкретных элементов, clear() — для полной очистки данных. Несмотря на то, что в localStorage сохраняются только строки, с помощью JSON разработчики могут взаимодействовать и с более сложными типами данных."}},{"id":"1uKvcj7pg9","type":"paragraph","data":{"text":"Основные характеристики localStorage:"}},{"id":"LQMVy5gOmm","type":"list","data":{"style":"unordered","items":["данные хранятся бессрочно;","очистить хранилище можно только принудительно — через код JavaScript или полную очистку браузерного кэша пользователем;","объем данных для хранения — 5-10 МБ (по этому показателю localStorage лидирует среди всех хранилищ);","старыми браузерами не поддерживается — например, на IE7 это локальный ящик не работает;","действует по принципу ограничения домена — сохраненная информация доступна лишь одному источнику. "]}},{"id":"PssXmeyinO","type":"paragraph","data":{"text":"Поскольку данные не исчезают даже после закрытия компьютера, сайты на длительный срок сохраняют нужную им информацию — в первую очередь это предпочтения пользователя и его настройки."}},{"id":"93184edd-ddc1-47c8-a464-b2f204daa58c","type":"banner-blank","data":{}},{"id":"7eMlDXpMUw","type":"paragraph","data":{"text":"Эффективность хранилища в том, что данные не нужно отправлять на сервер при каждом запросе, что позволяет хранить больше информации. localStorage особенно полезны для сохранения индивидуальных настроек — фильтров, размеров окон на сайте, выбора светлой/темной темы и т.д. Благодаря свойствам и размеру хранилища, с некоторыми приложениями юзер может работать и в офлайне."}},{"id":"c9GKsowUb4","type":"header2","data":{"text":"SessionStorage","level":2},"tunes":{}},{"id":"cOZ7Wj-iCJ","type":"paragraph","data":{"text":"Способ работы с данными sessionStorage во многом аналогичен localStorage, но есть принципиальное отличие — после закрытия браузера данные полностью удаляются. Это не означает, что sessionStorage — хуже, просто у него другая сфера применения. В частности формат идеален для хранения данных, актуальных в рамках конкретной сессии — например, информации при заполнении формы или вводе данных банковской карты."}},{"id":"Y56bKeYatM","type":"image","data":{"alt":"","title":"","caption":"","file":{"url":"https://media.tproger.ru/user-uploads/101078/2025-02-25/c4040c74-e2e9-41b5-a18b-7cf41465d5b3.png","id":46681},"stretched":false,"withBackground":false,"withBorder":false,"width":882,"height":730,"optimizedFile":{"original":"https://media.tproger.ru/user-uploads/101078/2025-02-25/c4040c74-e2e9-41b5-a18b-7cf41465d5b3.png","alt":"Что такое cookies, localStorage и sessionStorage: главные отличия и примеры 3","dimensions":{"width":882,"height":730},"additionalSizes":{"srcSet":[{"url":"https://tproger.ru/signed_image/fZeIxg9iLNtwrRbmiRic9IpwasEbO-LA6I75xNzDtvo/rs:fill:766:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDEwNzgvMjAyNS0wMi0yNS9jNDA0MGM3NC1lMmU5LTQxYjUtYTE4Yi03Y2Y0MTQ2NWQ1YjMucG5n","dpr":1,"width":766},{"url":"https://tproger.ru/signed_image/WrPLMVxcOiqFrxAGmDNKeAmMC0nDNoU0aaVAtm_F6k4/rs:fill:1532:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDEwNzgvMjAyNS0wMi0yNS9jNDA0MGM3NC1lMmU5LTQxYjUtYTE4Yi03Y2Y0MTQ2NWQ1YjMucG5n","dpr":1,"width":1532},{"url":"https://tproger.ru/signed_image/0Ct2Jp73jUViHPi8k9MlA2Lj7men0Q60Q2kR3Byh4z0/rs:fill:686:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDEwNzgvMjAyNS0wMi0yNS9jNDA0MGM3NC1lMmU5LTQxYjUtYTE4Yi03Y2Y0MTQ2NWQ1YjMucG5n","dpr":1,"width":686},{"url":"https://tproger.ru/signed_image/8NJEmCDiUsspy6RI_jUNA7xjLBehMvJyqSwfpVoqzJw/rs:fill:1372:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDEwNzgvMjAyNS0wMi0yNS9jNDA0MGM3NC1lMmU5LTQxYjUtYTE4Yi03Y2Y0MTQ2NWQ1YjMucG5n","dpr":1,"width":1372},{"url":"https://tproger.ru/signed_image/dW1wUwYjoElP5rcpCskCrz65KL0Gjq-zUgrcV-5do7k/rs:fill:636:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDEwNzgvMjAyNS0wMi0yNS9jNDA0MGM3NC1lMmU5LTQxYjUtYTE4Yi03Y2Y0MTQ2NWQ1YjMucG5n","dpr":1,"width":636},{"url":"https://tproger.ru/signed_image/JmboONr2Yak5Dj3Ud17jw83ImURTfOZZuPL3YEIQbnY/rs:fill:1272:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDEwNzgvMjAyNS0wMi0yNS9jNDA0MGM3NC1lMmU5LTQxYjUtYTE4Yi03Y2Y0MTQ2NWQ1YjMucG5n","dpr":1,"width":1272},{"url":"https://tproger.ru/signed_image/5mx4v1iPrzQnin7eynSlPHX_bQ-uGxbYu1UCb7jb5K4/rs:fill:466:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDEwNzgvMjAyNS0wMi0yNS9jNDA0MGM3NC1lMmU5LTQxYjUtYTE4Yi03Y2Y0MTQ2NWQ1YjMucG5n","dpr":1,"width":466},{"url":"https://tproger.ru/signed_image/bLZInP8RRYVx0kqzzktS4y3n79T_9b5cPFvF_VPccJw/rs:fill:932:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDEwNzgvMjAyNS0wMi0yNS9jNDA0MGM3NC1lMmU5LTQxYjUtYTE4Yi03Y2Y0MTQ2NWQ1YjMucG5n","dpr":1,"width":932}],"sizes":[{"media":"(min-width: 1441px)","size":"766px"},{"media":"(min-width: 1281px)","size":"686px"},{"media":"(min-width: 1281px)","size":"766px"},{"media":"(min-width: 961px)","size":"766px"},{"media":"(min-width: 671px)","size":"636px"},{"media":"(min-width: 500px)","size":"466px"}]}}}},{"id":"v1o3LNyq7G","type":"paragraph","data":{"text":"Объем хранилища ограничен, но в большинстве случаев этого достаточно для хранения инфы в пределах одного сеанса. Данные по сути не защищены, так что вопрос приватности — забота пользователя."}},{"id":"eDqRwipR4Y","type":"paragraph","data":{"text":"Хранилище сеансов поддерживается всеми актуальными браузерами — данные находятся в полной доступности, пока открыты вкладки и окна. Если пользователь закрывает окно, происходит автоматическая очистка."}},{"id":"vlV_Ie_SAF","type":"paragraph","data":{"text":"Для подключения сеансового хранилища разработчики на JavaScript используют объект sessionStorage и методы для получения, установки и удаления данных."}},{"id":"hifGjcbtJC","type":"paragraph","data":{"text":"Пример кода:"}},{"id":"u-77PVNdX7","type":"code","data":{"code":"// Storing data in session storage\nsessionStorage.setItem(\"name\", \"Mathew\");\nsessionStorage.setItem(\"age\", \"33\");\n\n// Retrieving data from session storage\nconst name = sessionStorage.getItem(\"name\");\nconst age = sessionStorage.getItem(\"age\");\n\nconsole.log(name); // Output: Mathew\nconsole.log(age); // Output: 33\n\n// Removing data from session storage\nsessionStorage.removeItem(\"age\");\n\n// Clearing all data from session storage\nsessionStorage.clear();\n","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"tb2UbZyn5W","type":"paragraph","data":{"text":"Как видите, есть определенное сходство с localStorage, поскольку у хранилищ одинаковый алгоритм работы. Метод setItem() применяется для сохранения данных (первый аргумент — ключ, второй — значение), метод получения — removeItem(), для очистки используется метод clear()."}},{"id":"6ab4920a-d9fe-477b-bfab-3467e6b147da","type":"banner-blank","data":{}},{"id":"Pt-lWjcSv3","type":"paragraph","data":{"text":"Основные характеристики sessionStorage:"}},{"id":"h-vEcHEcXW","type":"list","data":{"style":"unordered","items":["данные хранятся в течение одной сессии, после закрытия браузера очищаются;","хранилище использует контекст браузера верхнего уровня, то есть в каждой вкладке содержатся уникальные данные;","объем данных — 5 МБ;","старые браузеры формат не поддерживают. "]}},{"id":"uXjZEod1Nm","type":"paragraph","data":{"text":"Если вы открываете другую вкладку с той же страницей, там будут храниться уже другие данные. При этом перезагрузка страницы на данные не влияет, но если прервется сессия (например, временно отвалится интернет) информация обнулится."}},{"id":"yYZcmVk3WU","type":"paragraph","data":{"text":"Способ SessionStorage применяют для сохранения данных неавторизованных посетителей в онлайн-магазинах — какие товары он смотрел, какие положил в корзину. Формат используется также в случаях, когда применение localStorage нецелесообразно — например, при заказе еды в ресторанах. В локальном хранилище посетитель бы увидел прошлый заказ, который он собирал и не оформил, но меню к тому времени может поменяться. В сессионном хранилище актуальный заказ будет собран по новой."}},{"id":"A63w5sD0y_","type":"header2","data":{"text":"Сравнение cookies, localStorage и sessionStorage","level":2},"tunes":{}},{"id":"FQ2MGkg1d1","type":"paragraph","data":{"text":"Принципиальная разница между способами хранения понятна из предыдущих разделов, осталось рассмотреть конкретные критерии."}},{"id":"rXaNg-GrOS","type":"header2","data":{"text":"Размер хранилища","level":2},"tunes":{}},{"id":"pCVL1aGsBc","type":"list","data":{"style":"unordered","items":["Файлы cookie. Здесь размер минимальный. Для каждого домена куки могут хранить ограниченный объем данных — как правило, не больше 4 КБ.","LocalStorage. Максимально возможный объем данных для каждого домена — не менее 5 МБ, а при использовании определенных настроек и больше.","SessionStorage. Здесь хранится больше данных для одного домена в сравнении с cookies. Размер — не более 5 МБ. "]}},{"id":"PYz83QR_JJ","type":"header2","data":{"text":"Срок хранения","level":2},"tunes":{}},{"id":"JxuWGJGiEl","type":"list","data":{"style":"unordered","items":["Файлы cookie. Данные куки могут быть сеансовыми или постоянными в зависимости от настроек. Постоянные имеют свой срок действия, который исчисляется месяцами или даже годами, сеансовые уничтожаются сразу после завершения сеанса. ","LocalStorage. Данные в локальном хранилище остаются после закрытия браузера и его повторного открытия. Удалить их может только пользователь или код JavaScript.","SessionStorage. Информация в сеансовом хранилище остается, пока открыта вкладка сайта. При закрытии данные удаляются."]}},{"id":"BFhOczECNn","type":"header2","data":{"text":"Работа с данными","level":2},"tunes":{}},{"id":"LM588itnhZ","type":"list","data":{"style":"unordered","items":["Файлы cookie. Разработчик может установить срок действия для файлов, после которого браузер автоматически очистит куки. ","LocalStorage. Нельзя запрограммировать автоматическое удаление данных или другие действия с ними. Они сохраняются, пока не будут удалены принудительно. ","SessionStorage. Здесь нет механизма автоматического истечения срока действия. Поэтому данные будут актуальны, пока открыта страница. "]}},{"id":"Y8hVlCO6uh","type":"header2","data":{"text":"Доступ к данным","level":2},"tunes":{}},{"id":"65w_0je445","type":"list","data":{"style":"unordered","items":["Cookies. Доступ к файлам можно получить и изменить через JavaScript API, но существуют определенные ограничения для третьих лиц. ","LocalStorage и sessionStorage. Есть прямой доступ к информации в хранилищах через API JavaScript, который позволяет манипулировать данными. "]}},{"id":"JnNx3W4tzg","type":"header2","data":{"text":"Сетевой трафик","level":2},"tunes":{}},{"id":"NGGCfMiTVv","type":"list","data":{"style":"unordered","items":["Cookies. Данные автоматически отправляются на север после каждого HTTP-запроса для соответствующего домена, что увеличивает загрузку трафика.","LocalStorage и sessionStorage. Данные не отправляются на сервер, а остаются на стороне клиента, что сокращает объем лишнего трафика. "]}},{"id":"dwaHpcvtpd","type":"header2","data":{"text":"Когда использовать cookies, localStorage и sessionStorage","level":2},"tunes":{}},{"id":"zy7D1xkP9G","type":"paragraph","data":{"text":"Использование различных способов хранения информации зависит от целей обращения с данными. На сайтах с авторизацией и значимой историей просмотра (например, в крупных онлайн-магазинах) важно, чтобы пользовательские данные сохранялись в большом объеме и как можно дольше, поэтому предпочтительным инструментом выступает localStorage."}},{"id":"sMM_e5nRy5","type":"paragraph","data":{"text":"В других случаях достаточно sessionStorage — например, для неавторизованных пользователей хранить информацию дольше одного сеанса не требуется. Cookies применяются, когда нужно отправить небольшое количество данных на сервер — этот способ используют практически все современные веб-ресурсы при работе с информацией, требующей быстрого обновления."}},{"id":"kyixzHQ8fj","type":"paragraph","data":{"text":"Разницу в жизненном цикле cookies, localStorage и sessionStorage используют в соответствии с задачами хранения. Ограниченный срок действия cookies и данных сессионного хранилища могут стать преимуществами в одном случае и недостатками в другом. С данными localStorage аналогичная ситуация — если нужен полный контроль времени хранения, этот формат идеально подходит."}},{"id":"XR47hPBqoe","type":"header2","data":{"text":"Проблемы и перспективы хранилищ данных","level":2},"tunes":{}},{"id":"0L23siAmKS","type":"paragraph","data":{"text":"Все хранилища потенциально уязвимы для XSS-атак. В cookies применяют дополнительные меры защиты: флаги HTTPOnly и Secure запрещают доступ из JavaScript к файлам, чувствительным к безопасности. Для отправки таких файлов используется передача по шифрованным каналам HTTPS."}},{"id":"kAaCndUrlH","type":"paragraph","data":{"text":"Для защиты от атак CSRF (подделка межсайтовых запросов) используют атрибут SameSite, проверку HTTP_Referer/Origin или применение синхронизированных токенов."}},{"id":"LwtBioRsen","type":"paragraph","data":{"text":"В localStorage для обеспечения безопасности важно соблюдать принцип одного источника и тоже пользоваться зашифрованными HTTPS-соединениями. При этом эксперты все равно не рекомендуют сохранять конфиденциальные данные в localStorage."}},{"id":"2wyPCSMm04","type":"paragraph","data":{"text":"Учитывайте, что куки могут замедлять загрузку, особенно если у пользователей низкая скорость интернета. LocalStorage на HTTP-запросы не влияет, что положительно отражается на производительности веб-ресурса."}},{"id":"Whv6PIdrBK","type":"paragraph","data":{"text":"После появления пятой версии HTML localStorage становится более востребованным элементом при разработке веб-приложений. Он обеспечивает полноценной контроль данных с сохранением актуальности проекта, идеально подходит для хранения структурированной информации и ее дальнейшей обработки. При этом инструмент поддерживает синхронизацию данных, когда пользователь открывает приложение в разных вкладках."}}],"version":"2.25.0"}

Ошибка в настройках сайта