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.