{"id":14520,"date":"2022-10-08T03:20:06","date_gmt":"2022-10-07T21:50:06","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-local-storage-not-applying-to-remember-the-last-user-input-for-the-class-toggle\/"},"modified":"2022-10-08T03:20:06","modified_gmt":"2022-10-07T21:50:06","slug":"solved-local-storage-not-applying-to-remember-the-last-user-input-for-the-class-toggle","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-local-storage-not-applying-to-remember-the-last-user-input-for-the-class-toggle\/","title":{"rendered":"[Solved] Local storage not applying to remember the last user input for the class toggle"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-57429399\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"57429399\" data-parentid=\"57426981\" data-score=\"1\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>The functionality logic :<\/p>\n<ul>\n<li>when a <code>button<\/code> is pressed we check if it has the <code>red<\/code> class (as all the elements, <code>button<\/code>s and the other <code>div<\/code>s, will receive the <code>red<\/code> class at some point).\n<ul>\n<li>if it has that class then it will be toggled (it will be removed from all the <code>button<\/code>s and the other <code>div<\/code>s) thus the <code>localStorage<\/code> will store something like <em>&#8220;No the elements don&#8217;t have the red class&#8221;<\/em>.<\/li>\n<li>if it doesn&#8217;t has it the it will be toggled (it will be added to all the <code>button<\/code>s and the other <code>div<\/code>s) thus the <code>localStorage<\/code> will store something like <em>&#8220;Yes the elements have the red class&#8221;<\/em>.<\/li>\n<li>basically, the <code>localStorage<\/code> will store <code>'0'<\/code> if the class isn&#8217;t applied, <code>'1'<\/code> if the class is applied.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>now, when the page gets refreshed, we check if the <code>localStorage<\/code> item that stores the <code>red<\/code> class&#8217; state is there (not <code>null<\/code>) and has the value of <code>'1'<\/code> then apply that class to all the elements (the <code>button<\/code>s and the other <code>div<\/code>s).<\/p>\n<\/li>\n<li>\n<p>remove the item that holds the <code>red<\/code> class&#8217; state from the <code>localStorage<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p>Here&#8217;s the update <code>JavaScript<\/code> code :<\/p>\n<blockquote>\n<p>Sorry for everyone as I can&#8217;t make a live demo using SO&#8217;s snippets as the <code>localStorage<\/code> can&#8217;t be reached because the code is sandboxed.<\/p>\n<p>Anyway, here&#8217;s a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/Thabet_Sakhraoui\/pen\/eqLJmY\">CodePen<\/a> demo illustrating the required functionality.<\/p>\n<\/blockquote>\n<pre class=\"lang-js prettyprint-override\"><code>const els = document.querySelectorAll('.dog,.cat, #abc, #xyz');\n\n\/** when the page finishes loading **\/\ndocument.addEventListener('DOMContentLoaded', () =&gt; {\n    \/** check if the 'red' class was applied **\/\n    applied = window.localStorage.getItem('class-applied') === '0' ? false:true;\n  \/** remove \"class-applied\" item from the localStorage **\/\n  window.localStorage.removeItem('class-applied');\n  \/** if the \"red\" class was applied just apply it on document load **\/\n  applied &amp;&amp; els.forEach(el =&gt; el.classList.add('red'));\n});\n\nels.forEach(btn =&gt; {\n  btn.addEventListener('click', () =&gt; {\n    \/** store the \"red\" class' state : '1' means it is applied, '0' means it isn't apllied **\/\n    window.localStorage.setItem(\n      'class-applied',\n      !btn.classList.contains('red') ? '1' : '0'\n    );\n    els.forEach(el =&gt; el.classList.toggle('red'));\n  });\n});\n<\/code><\/pre>\n<blockquote>\n<p>The above code should be placed just before <code>&lt;\/body&gt;<\/code>.<\/p>\n<\/blockquote><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">2<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved Local storage not applying to remember the last user input for the class toggle <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] The functionality logic : when a button is pressed we check if it has the red class (as all the elements, buttons and the other divs, will receive the red class at some point). if it has that class then it will be toggled (it will be removed from all the buttons and the &#8230; <a title=\"[Solved] Local storage not applying to remember the last user input for the class toggle\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-local-storage-not-applying-to-remember-the-last-user-input-for-the-class-toggle\/\" aria-label=\"More on [Solved] Local storage not applying to remember the last user input for the class toggle\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[333,3205,3800],"class_list":["post-14520","post","type-post","status-publish","format-standard","hentry","category-solved","tag-javascript","tag-local","tag-storage"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] Local storage not applying to remember the last user input for the class toggle - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-local-storage-not-applying-to-remember-the-last-user-input-for-the-class-toggle\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Local storage not applying to remember the last user input for the class toggle - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] The functionality logic : when a button is pressed we check if it has the red class (as all the elements, buttons and the other divs, will receive the red class at some point). if it has that class then it will be toggled (it will be removed from all the buttons and the ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-local-storage-not-applying-to-remember-the-last-user-input-for-the-class-toggle\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-07T21:50:06+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-local-storage-not-applying-to-remember-the-last-user-input-for-the-class-toggle\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-local-storage-not-applying-to-remember-the-last-user-input-for-the-class-toggle\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Local storage not applying to remember the last user input for the class toggle\",\"datePublished\":\"2022-10-07T21:50:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-local-storage-not-applying-to-remember-the-last-user-input-for-the-class-toggle\/\"},\"wordCount\":247,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"javascript\",\"local\",\"storage\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-local-storage-not-applying-to-remember-the-last-user-input-for-the-class-toggle\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-local-storage-not-applying-to-remember-the-last-user-input-for-the-class-toggle\/\",\"name\":\"[Solved] Local storage not applying to remember the last user input for the class toggle - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-10-07T21:50:06+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-local-storage-not-applying-to-remember-the-last-user-input-for-the-class-toggle\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-local-storage-not-applying-to-remember-the-last-user-input-for-the-class-toggle\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-local-storage-not-applying-to-remember-the-last-user-input-for-the-class-toggle\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Local storage not applying to remember the last user input for the class toggle\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Local storage not applying to remember the last user input for the class toggle - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-local-storage-not-applying-to-remember-the-last-user-input-for-the-class-toggle\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Local storage not applying to remember the last user input for the class toggle - JassWeb","og_description":"[ad_1] The functionality logic : when a button is pressed we check if it has the red class (as all the elements, buttons and the other divs, will receive the red class at some point). if it has that class then it will be toggled (it will be removed from all the buttons and the ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-local-storage-not-applying-to-remember-the-last-user-input-for-the-class-toggle\/","og_site_name":"JassWeb","article_published_time":"2022-10-07T21:50:06+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-local-storage-not-applying-to-remember-the-last-user-input-for-the-class-toggle\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-local-storage-not-applying-to-remember-the-last-user-input-for-the-class-toggle\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Local storage not applying to remember the last user input for the class toggle","datePublished":"2022-10-07T21:50:06+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-local-storage-not-applying-to-remember-the-last-user-input-for-the-class-toggle\/"},"wordCount":247,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["javascript","local","storage"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-local-storage-not-applying-to-remember-the-last-user-input-for-the-class-toggle\/","url":"https:\/\/jassweb.com\/solved\/solved-local-storage-not-applying-to-remember-the-last-user-input-for-the-class-toggle\/","name":"[Solved] Local storage not applying to remember the last user input for the class toggle - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-10-07T21:50:06+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-local-storage-not-applying-to-remember-the-last-user-input-for-the-class-toggle\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-local-storage-not-applying-to-remember-the-last-user-input-for-the-class-toggle\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-local-storage-not-applying-to-remember-the-last-user-input-for-the-class-toggle\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Local storage not applying to remember the last user input for the class toggle"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/14520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=14520"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/14520\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=14520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=14520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=14520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}