PageSourceSearch

https://ymatuhin.ru/posts/session-storage-use-cases/

html ymatuhin.ru collected 2026-10-02 11:09:47 UTC 27,734 bytes, 63 lines download raw bytes

1<!DOCTYPE html><html lang="ru"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Хороший случай для использования sessionStorage</title><meta name="description" content="Сессионное хранилище — странная штука, я много лет знаю о нём, но почти никогда не использовал. Просто потому что почти всегда localStorage лучше. "><meta name="robots" content="index,follow"><link rel="canonical" href="https://ymatuhin.ru/posts/session-storage-use-cases/"><link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml"><meta property="og:locale" content="ru_RU"><meta property="og:site_name" content="Юрий Матюхин — фронтендер, обыкновенный"><meta property="og:type" content="article"><meta property="og:title" content="Хороший случай для использования sessionStorage"><meta property="og:description" content="Сессионное хранилище — странная штука, я много лет знаю о нём, но почти никогда не использовал. Просто потому что почти всегда localStorage лучше. "><meta property="og:url" content="https://ymatuhin.ru/posts/session-storage-use-cases/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Хороший случай для использования sessionStorage"><meta name="twitter:description" content="Сессионное хранилище — странная штука, я много лет знаю о нём, но почти никогда не использовал. Просто потому что почти всегда localStorage лучше. "><meta property="og:image" content="https://ymatuhin.ru/assets/img/se
1ssion-storage-use-cases.png"><meta property="og:image:alt" content="Хороший случай для использования sessionStorage"><meta name="twitter:image" content="https://ymatuhin.ru/assets/img/session-storage-use-cases.png"><link rel="icon" href="/favicon.ico" sizes="32x32"><link rel="icon" href="/favicon.svg" type="image/svg+xml"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><style>/*!* cyrillic-ext *!*//*!* cyrillic *!*//*!* latin-ext *!*//*!* latin *!*/@font-face{font-family:'Ubuntu Sans Mono';font-style:normal;font-weight:400 700;font-display:fallback;src:url(/assets/fonts/ubuntu-sans-mono-normal-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Ubuntu Sans Mono';font-style:normal;font-weight:400 700;font-display:fallback;src:url(/assets/fonts/ubuntu-sans-mono-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Ubuntu Sans Mono';font-style:normal;font-weight:400 700;font-display:fallback;src:url(/assets/fonts/ubuntu-sans-mono-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@layer base{@view-transition{navigation:auto}:root{--font-family:"Ubuntu Sans Mono","JetBrains Mono","Fira Code","Iosevka",Consolas,"Ubuntu Mono",monospace;--code-font-family:var(--font-family);--divider-color:#585b70;--background-color:#181825;--darker-background-color:#11111b;--lighter-background-color:#1e1e2e;--border-color:#313244;--accent-color:#b4befe;--text-color:#cdd6f4;--secondary-text-color:#9399b2;--text-font-size:18px;--text-line-height:28px;--heading-font-size:20px;--heading-line-height:32px}html{box-sizing:border-box;height:100%;scroll-padding-top:1rem;scroll-behavior:smooth;background-color:var(--background-color);background-image:linear-gradient(to bottom right,var(--background-color),var(--darker-background-color));background-attachment:fixed}*,::after,::before{box-sizing:inherit;margin:0;padding:0}body{font-family:var(--font-family),monospace;min-height:100vh;font-weight:400;font-size:var(--text-font-size);line-height:var(--text-line-height);background:linear-gradient(to top,transparent,transparent,rgba(0,0,0,.333),rgba(0,0,0,.333));background-size:100% 2px;color:var(--text-color);text-rendering:optimizeLegibility;text-size-adjust:100%;margin:0;padding:0;text-wrap:pretty}a{color:var(--accent-color);text-underline-offset:2px;margin:-.25rem;padding:.25rem}a:not(:has(img,iframe)):focus-visible,a:not(:has(img,iframe)):hover{text-decoration:none;filter:brightness(1.2);text-shadow:0 0 .5rem color-mix(in srgb,currentColor 50%,transparent)}a:focus-visible{outline:1px solid;outline-offset:2px}a[target="_blank"]::after{content:"\2060";display:inline-block;vertical-align:middle;width:16px;height:16px;margin-left:4px;margin-bottom:1px;background-color:currentColor;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M21 11V3h-8v2h4v2h-2v2h-2v2h-2v2H9v2h2v-2h2v-2h2V9h2V7h2v4h2zM11 5H3v16h16v-8h-2v6H5V7h6V5z' fill='black'/%3E%3C/svg%3E");mask-repeat:no-repeat;mask-size:16px 16px;mask-position:right center;image-rendering:pixelated}:is(h1,h2,h3,h4,h5,h6) a[target="_blank"]::after{width:20px;height:20px;margin-left:8px;margin-bottom:6px;mask-size:20px 20px}a[target="_blank"]{overflow-wrap:anywhere}p{hanging-punctuation:first last}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}@layer content{h1,h2,h3,h4,h5,h6{display:block;font-size:var(--heading-font-size);line-height:var(--heading-line-height);letter-spacing:.04em;margin:3rem 0 1rem}h1{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:calc(var(--heading-font-size) * 0.25)}h1,h2{text-transform:uppercase}
1h2 a[href^="#"],h3 a[href^="#"],h4 a[href^="#"]{display:inline-block;vertical-align:top;position:relative;font-size:0;line-height:0;color:transparent;white-space:nowrap;letter-spacing:-999px}h2 a[href^="#"]::before,h3 a[href^="#"]::before,h4 a[href^="#"]::before{font-size:var(--heading-font-size);line-height:var(--heading-line-height);color:var(--divider-color);cursor:pointer;letter-spacing:initial;margin-right:1ch}h2 a[href^="#"]::before{content:'##'}h3 a[href^="#"]::before{content:'###'}h4 a[href^="#"]::before{content:'####'}figure,iframe,ol,p,table,ul,video{margin-bottom:1rem;margin-top:1rem}ol,ul{margin-left:4ch;padding:0}ol ol,ol ul,ul ol,ul ul{margin-top:0}li::marker{color:var(--accent-color)}ol li,ul li{position:relative}iframe,img{background-color:var(--lighter-background-color);display:block;border:8px solid var(--accent-color);padding:8px;max-width:100%}iframe{height:auto}img{height:auto}figure{display:inline-flex;vertical-align:top;flex-direction:column;max-width:100%}figure>div,figure>picture{position:relative}figure>div::after,figure>picture::after{content:'';position:absolute;inset:1rem;background:linear-gradient(to top,transparent,transparent,rgba(0,0,0,.2),rgba(0,0,0,.2));background-size:100% 2px}:focus-visible figure::after,figure:hover>div::after,figure:hover>picture::after{background:initial}figure iframe,figure img,figure video{margin-bottom:0}figure figcaption{background:var(--accent-color);color:var(--background-color);font-size:1em;font-weight:400;padding:0 1ch;margin-top:.5rem;contain:inline-size;text-align:center}code,kbd{font-family:var(--code-font-family),monospace;background:var(--lighter-background-color);padding:1px 6px 2px;border:1px solid var(--border-color)}:not(pre)>code{white-space:nowrap}pre{background:var(--lighter-background-color);padding:.75rem 1rem;overflow-x:auto;overflow-y:hidden;border:1px solid var(--border-color);tab-size:2;font-size:1rem;margin-top:1.5rem;margin-bottom:1.5rem}code code,pre code{background:0 0;padding:0;margin:0;border:none;white-space:pre-wrap;overflow-wrap:anywhere}hr{width:100%;border:none;background:var(--accent-color);height:2px;margin:1rem 0}hr.divider{margin:1rem 0;height:9px;background:initial;
1border-top:3px dotted var(--divider-color);border-bottom:3px dotted var(--divider-color)}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}code[class*=language-],pre[class*=language-]{color:#cdd6f4;background:0 0;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;hyphens:none}pre[class*=language-]{overflow:auto;background:#1e1e2e}:not(pre)>code[class*=language-],pre[class*=language-]{background:#1e1e2e}:not(pre)>code[class*=language-]{white-space:normal}.token.comment,.token.doctype{color:#9399b2;font-style:italic}.token.punctuation{color:#cdd6f4}.namespace{opacity:.7}.token.boolean,.token.constant,.token.number,.token.property,.token.tag{color:#f38ba8}.token.attr-name,.token.builtin,.token.selector,.token.string{color:#a6e3a1}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#cdd6f4}.token.atrule,.token.attr-value,.token.keyword{color:#cba6f7}.token.class-name,.token.function{color:#89b4fa}.token.important,.token.regex,.token.variable{color:#fab387}.token.important{font-weight:700}.token.entity{cursor:help}label{display:inline-block}label input{margin-top:0}input,select,textarea{background:0 0;color:var(--text-color);border:1px solid var(--text-color);padding:10px;font:inherit;appearance:none}input:active,input:focus-visible,select:active,select:focus-visible,textarea:active,textarea:focus-visible{border-color:var(--accent-color);outline:1px solid var(--accent-color);outline-offset:2px}input:active,select:active,textarea:active{box-shadow:none}select{background-image:linear-gradient(45deg,transparent 50%,var(--accent-color) 50%),linear-gradient(135deg,var(--accent-color) 50%,transparent 50%);background-position:calc(100% - 20px),calc(100% - 15px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px}select option{background:var(--background-color)}input[type=checkbox],input[type=radio]{vertical-align:middle;inline-size:1em;block-size:1em;padding:0;box-shadow:inset 0 0 0 3px var(--background-color)}input[type=radio]{display:inline-block;border-radius:50%}input[type=checkbox]:checked,input[type=radio]:checked{background:var(--accent-color)}}@layer components{.post-card_in-post{margin-bottom:2rem}.post-card+.post-card{padding-top:2rem;border-top:1px solid var(--border-color);margin-top:2rem}@media (min-width:480px){.post-card+.post-card{padding-top:3.5rem;margin-top:3rem}}.post-card__cover figure,.post-card__title{margin:0}.post-card__divider{margin:.75rem 0}.post-card__title{text-decoration:none}.post-card__link{display:block;text-decoration:none}.post-card__cover{margin-bottom:1.75rem}.post-card__cover a{display:block}.post-card__meta{font-size:1rem;color:var(--secondary-text-color)}.post-card__meta a{color:inherit}.cards>.post-card .post-card__content{margin-top:.75rem}@media (min-width:900px){.cards>.post-card+.post-card{margin-top:0;padding-top:0;border-top:0}}}.comments__headline{margin:3rem 0 1rem;display:flex;vertical-align:middle}.comments__headline :where(h2,h3,h4,h5,h6){margin-top:0;margin-bottom:0;margin-right:auto}.comments__headline label{margin:-.25rem;padding:.25rem;margin-left:1.5rem;cursor:pointer;user-select:none}.comments__headline label .full{display:none}@media (min-width:480px){.comments__headline label .short{display:none}.comments__headline label .full{display:inline}}.comments__content [data-platform]{display:none}.comments:has(input[type=radio][value=telegram]:checked) [data-platform=telegram],.comments:has(input[type=radio][value=vk]:checked) [data-platform=vk]{display:block}.layout_post :where(.post__content,.layout__main > aside)>:where(
2h1,h2,h3,h4,h5,h6,p:not(:has(> :where(img,picture,video,iframe))),ul,ol,blockquote
3){max-width:52rem}heading-anchors{display:block}.post__content>:first-child{margin-top:0}.post__content>:last-child{margin-bottom:0}.post__divider-after{color:var(--secondary-text-color);margin:3rem 0}@layer components{.posts-pagination{margin-top:3rem;display:flex;gap:.75rem}.posts-pagination__newer{margin-left:auto}}@layer components{.header{margin-bottom:3rem}.header__inner{display:flex;align-items:center;justify-content:space-between}.header__logo{display:flex;flex-grow:1;flex-shrink:0}.header__logo:focus-visible,.header__logo:hover{filter:brightness(1.2)}.header__logo::after{content:"";background:repeating-linear-gradient(90deg,var(--accent-color),var(--accent-color) 2px,transparent 0,transparent 10
3px);display:block;flex-grow:1;margin-left:-2px}.header__logo svg{display:flex;align-items:center;justify-content:center;text-decoration:none;background:var(--accent-color);box-sizing:content-box;padding:12px 16px}.header__locale{display:flex;align-items:center;border:2px solid var(--accent-color);height:40px;padding:0 12px}.nav-container{margin-top:1rem;display:flex;justify-content:space-between;gap:1rem}.nav-container nav:last-child{text-align:right}.header select{border-color:var(--accent-color);color:#000;padding:4px 2.25rem 4px 10px;border-width:2px;background-color:var(--accent-color);background-image:linear-gradient(45deg,transparent 50%,#000 50%),linear-gradient(135deg,#000 50%,transparent 50%);background-position:calc(100% - 20px),calc(100% - 15px)}}@layer components{.footer{margin-top:3rem;flex-grow:0;color:var(--secondary-text-color)}.footer a{color:inherit}.footer p{margin:0}}@layer layout{.layout{position:relative;margin:0 auto;display:flex;flex-direction:column;padding:3rem 1.5rem;max-width:78rem;min-height:100vh;background-color:var(--background-color)}@media (min-width:480px){.layout{padding:3rem 2rem}}@media (min-width:768px){.layout{padding:4rem 3rem}}@media (min-width:926px){.layout{border-left:1px solid #313244;border-right:1px solid #313244}}.layout__content{flex:1 0 auto}.layout__main{margin-top:4rem}}</style>
3<script type="application/ld+json">{
4  "@context": "https://schema.org",
5  "@type": "WebSite",
6  "@id": "https://ymatuhin.ru/#website",
7  "url": "https://ymatuhin.ru/",
8  "name": "Юрий Матюхин",
9  "description": "Фронтенд-лид в Lifehacker и BurningHut. Пишу про разработку (CSS, JS, Nuxt, Vue), делюсь кодом и мыслями. Живу в Брянской области, люблю аниме и делать что-то руками.",
10  "inLanguage": "ru-RU",
11  "publisher": {
12    "@type": "Person",
13    "@id": "https://ymatuhin.ru/#author",
14    "name": "Юрий Матюхин",
15    "url": "https://ymatuhin.ru/",
16    "sameAs": [
17      "https://github.com/ymatuhin",
18      "https://twitter.com/ymatuhin",
19      "https://vk.com/ymatuhin"
20    ]
21  }
22}</script>
22<script type="application/ld+json">{
23  "@context": "https://schema.org",
24  "@type": "BlogPosting",
25  "headline": "Хороший случай для использования sessionStorage",
26  "description": "Сессионное хранилище — странная штука, я много лет знаю о нём, но почти никогда не использовал. Просто потому что почти всегда localStorage лучше. ",
27  "keywords": "development, sessionStorage, localStorage",
28  "datePublished": "2026-06-15T00:00:00.000Z",
29  "dateModified": "2026-06-15T18:10:27.452Z",
30  "inLanguage": "ru-RU",
31  "author": {
32    "@type": "Person",
33    "@id": "https://ymatuhin.ru/#author",
34    "name": "Юрий Матюхин",
35    "url": "https://ymatuhin.ru/",
36    "sameAs": [
37      "https://github.com/ymatuhin",
38      "https://twitter.com/ymatuhin",
39      "https://vk.com/ymatuhin"
40    ]
41  },
42  "publisher": {
43    "@type": "Person",
44    "@id": "https://ymatuhin.ru/#author",
45    "name": "Юрий Матюхин",
46    "url": "https://ymatuhin.ru/"
47  },
48  "image": {
49    "@type": "ImageObject",
50    "url": "https://ymatuhin.ru/assets/img/session-storage-use-cases.png"
51  },
52  "url": "https://ymatuhin.ru/posts/session-storage-use-cases/",
53  "mainEntityOfPage": {
54    "@type": "WebPage",
55    "@id": "https://ymatuhin.ru/posts/session-storage-use-cases/"
56  }
57}</script>
57<script type="module" src="/assets/js/heading-anchors.js"></script>
57<link rel="alternate" href="/feed.xml" type="application/rss+xml" title="Юрий Матюхин — фронтендер, обыкновенный"></head><div class="layout layout_post"><div class="layout__content"><header class="header"><div class="header__inner"><a class="header__logo" href="/" aria-label="Юра Матюхин — главная страница"><svg fill="none" width="128" height="16" viewBox="0 0 259 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><clipPath id="a"><path d="m0 0h259v32h-259z"></path></clipPath><g clip-path="url(#a)" fill="#000"><path d="m234.262 27.8376-.004 3.849h.004-3.983v-31.32869h3.58l20.946 24.83919v-24.83919h3.983v31.32869h-3.352l-3.272-3.849-17.902-21.12444z"></path><path d="m252.162 27.8374 3.277 3.849h-21.179v-3.849z" fill-opacity=".25"></path><path d="m218.699 31.6866v-31.32869h3.983v31.32869z"></path><path d="m207.115 16.6936v-16.33569h3.985v31.32869h-3.985v-11.1441h-21.131v11.1441h-3.984v-31.32869h3.984v16.33569z"></path><path d="m149.876 4.20686v13.47134c0 2.8196.893 5.2811 2.636 7.3846 1.742 2.1035 4.288 3.1776 7.638 3.1776s5.941-1.0741 7.684-3.1776c1.742-2.1035 2.591-4.565 2.591-7.3846v-13.47134-3.84895h3.975v17.23079c0 4.0279-1.25 7.4293-3.796 10.2042-2.547 2.8196-6.031 4.207-10.454 4.207-4.422 0-7.907-1.3874-10.453-4.207-2.546-2.7749-3.797-6.1763-3.797-10.2042v-17.23079h3.976z"></path><path d="m149.875.35791h20.549v3.84895h-20.549z" fill-opacity=".25"></path><path d="m110 .35791h29.8v3.84895h-12.906v27.47974h-3.988v-27.47974h-12.906z"></path><path d="m84.9238 31.6864 2.0764-3.849h21.4878l2.086 3.849z"></path><path d="m110.575 31.6867-2.085-3.8489-10.7392-19.82662-10.7395 19.82662-2.0869 3.8489h-4.6236l17.45-31.6867 17.4502 31.6867z"></path><path d="m70.303 27.8374v3.849h-26.6741v-3.849z" fill-opacity=".25"></path><path d="m43.5781 6.71316v21.12444 3.849h-3.9785v-31.32869h3.621l13.679 16.82799 13.6791-16.82799h3.6209v31.32869h-3.9785v-3.849-21.12444l-13.3215 16.33564z"></path><path d="m29.811.35791h4.689l-15.214 23.27269v8.056h-3.9825v-8.056l-15.3035-23.27269h4.6537l12.574 19.28949 10.068-15.44054z"></path><path d="m29.8175.35791-2.5157 3.84895h-11.2784l2.4616-3.84895z" fill-opacity=".25"></path></g></svg></a></div><div class="nav-container"><nav aria-label="Основные категории"><a href="/tag/development/">разработка</a> <a href="/tag/non-development/">не разработка</a> <a href="/projects/">проекты</a> <a href="/tags/">теги</a></nav><nav aria-label="Социальные ссылки: GitHub, Telegram, почта и RSS"><a href="https://github.com/ymatuhin" target="_blank" rel="noopener noreferrer">гитхаб</a> <a href="https://t.me/ymatuhin" target="_blank" rel="noopener noreferrer">телега</a> <a href="mailto:[email protected]">почта</a> <a href="/feed.xml">рсс</a></nav></div></header><main class="layout__main"><header class="post-card post-card_in-post"><h1 class="post-card__title" id="khoroshiy-sluchay-dlya-ispolzovaniya-sessionstorage">Хороший случай для использования sessionStorage</h1><hr class="post-card__divider / divider"><div class="post-card__meta"><span class="post-card__date"><time class="pubdate" datetime="2026-06-15">15 июня 2026 </time></span>::: <span class="post-card__tags"><a href="/tag/development/">разработка</a>, sessionStorage, localStorage</span></div></header><article class="post"><heading-anchors position="afterbegin" class="post__content"><p>Сессионное хранилище — странная штука, я много лет знаю о нём, но почти никогда не использовал. Просто потому что почти всегда localStorage лучше. Но сегодня я нашёл ему хорошее применение.</p><figure><picture><source type="image/avif" srcset="/assets/img-optimized/e8lTHxkEP6-366.avif 366w, /assets/img-optimized/e8lTHxkEP6-830.avif 830w, /assets/img-optimized/e8lTHxkEP6-1660.avif 1660w, /assets/img-optimized/e8lTHxkEP6-1672.avif 1672w" sizes="(min-width: 926px) 830px, 366px"><source type="image/webp" srcset="/assets/img-optimized/e8lTHxkEP6-366.webp 366w, /assets/img-optimized/e8lTHxkEP6-830.webp 830w, /assets/img-optimized/e8lTHxkEP6-1660.webp 1660w, /assets/img-optimized/e8lTHxkEP6-1672.webp 1672w" sizes="(min-width: 926px) 830px, 366px"><img src="/assets/img-optimized/e8lTHxkEP6-366.png" alt="" loading="eager" decoding="async" fetchpriority="high" width="1672" height="941" srcset="/assets/img-optimized/e8lTHxkEP6-366.png 366w, /assets/img-optimized/e8lTHxkEP6-830.png 830w, /assets/img-optimized/e8lTHxkEP6-1660.png 1660w, /assets/img-optimized/e8lTHxkEP6-1672.png 1672w" sizes="(min-width: 926px) 830px, 366px"></picture><figcaption></figcaption></figure><h2 id="otlozhennoe-deystvie-posle-avtorizatsii-cherez-redirekt">Отложенное действие после авторизации через редирект</h2><p>У меня была авторизация через попап с открытием новой вкладки и отправкой токенов через postMessage. К сожалению, этот способ плохо работает внутри телеграма и других подобных кейсов. Не говоря уже о случае, когда вкладка просто не открывается. Но это было удобно, можно было отложить действие до момента авторизации и продолжить его после.</p><p>Сейчас нужно переходить на авторизацию через редирект и тут такой кейс провернуть уже сложнее. Нужно где-то хранить действие, чтобы вернуться к нему после успешной авторизации. И тут отлично подойдёт именно <code>sessionStorage</code>. Нам не нужно, чтобы это утекало в другие вкладки и в целом не нужно хранить это действие, оно актуально только внутри текущей сессии.</p><pre class="language-js"><code class="language-js"><span class="token comment">// Перед редиректом на авторизацию</span>
58sessionStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'pendingAction'</span><span class="token punctuation">,</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">
58'subscribe'</span><span class="token punctuation">,</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">42</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
59
60<span class="token comment">// После успешной авторизации</span>
61<span class="token keyword">const</span> action <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>sessionStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'pendingAction'</span><span class="token punctuation">)</span> <span class="token operator">??</span> <span class="token string">'null'</span><span class="token punctuation">)</span>
62sessionStorage<span class="token punctuation">.</span><span class="token function">removeItem</span><span class="token punctuation">(</span><span class="token string">'pendingAction'</span><span class="token punctuation">)</span>
63<span class="token keyword">if</span> <span class="token punctuation">(</span>action<span class="token punctuation">)</span> <span class="token function">handleAction</span><span class="token punctuation">(</span>action<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p>В целом, localStorage здесь тоже сработал бы, но потребовал бы следить за устаревшими данными и пересечением между вкладками.</p></heading-anchors></article><hr class="post__divider-after / divider"><aside aria-label="Похожие статьи"><h3 id="stati-s-takimi-zhe-tegami">Статьи с такими же тегами</h3><ul><li><a href="/posts/claude-ai-easier-to-sign-up/">Claude AI убрал проверку телефона при регистрации<
63/a></li><li><a href="/posts/contenteditable-placeholder/">Код. Плейсхолдер для [contenteditable]</a></li><li><a href="/posts/how-to-name-variables/">Как называть переменные</a></li><li><a href="/posts/smooth-native-scroll/">Плавный, нативный скролл</a></li><li><a href="/posts/text-decoration-skip/">Адекватное подчеркивание ссылок</a></li></ul></aside><hr class="post__divider-after / divider"><div class="comments / js-comments"><div class="comments__headline"><h4 id="kommentarii">Комментарии</h4><label><input type="radio" name="comments-system" value="telegram"> <span class="full">Телеграм</span> <span class="short">TG</span></label> <label><input type="radio" name="comments-system" value="vk"> <span class="full">Вконтакте</span> <span class="short">VK</span></label></div><div class="comments__content / js-comments-content"></div>
63<script src="/assets/js/comments.js" type="module"></script>
63</div></main></div><footer class="footer / layout__footer"><p>Юрий Матюхин, фронтендер, обыкновенный © <a href="https://web.archive.org/web/20260000000000*/http://ymatuhin.ru/" target="_blank" rel="noopener noreferrer">2013–2026</a>.<br>Вдохновлено темой <a href="https://github.com/panr/hugo-theme-terminal" target="_blank" rel="noopener noreferrer">Terminal</a>, <a href="https://github.com/ymatuhin/ymatuhin.ru" target="_blank" rel="noopener noreferrer">под капотом</a> работает на <a href="https://www.11ty.dev/" target="_blank" rel="noopener noreferrer">11ty</a>.</p></footer></div><img src="https://mc.yandex.ru/watch/28017147" style="position:absolute;left:-9999px" alt="">
63<script src="/assets/js/links-animation.js" type="module"></script>
63</html>
63<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"e182ee6e6fb04894a26ddcd994ea9798","r":1,"spa":2}' crossorigin="anonymous"></script>
vendor: 1 bytes, line 63
63

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.