{"id":3805,"date":"2018-08-01T10:03:49","date_gmt":"2018-08-01T04:33:49","guid":{"rendered":"https:\/\/www.csestack.org\/?p=3805"},"modified":"2021-01-31T08:12:10","modified_gmt":"2021-01-31T02:42:10","slug":"javascript-localstorage-pass-data-web-page","status":"publish","type":"post","link":"https:\/\/www.csestack.org\/javascript-localstorage-pass-data-web-page\/","title":{"rendered":"[Solved] How to Pass Data to Another Page using JavaScript LocalStorage?"},"content":{"rendered":"<p>In this quick guide, I will share the code to\u00a0pass data to another page using JavaScript localStorage. Before that, you should know why do you need localStorage and how does it work.<\/p>\n<h4 style=\"text-align: left;\">Why localStorage?<\/h4>\n<p>Usually, we can pass the data from one page to another page as a parameter in the URL. Passing those values in URL has certain disadvantages.<\/p>\n<ul>\n<li>If the data is too big, a URL with a long string doesn&#8217;t look good.<\/li>\n<li>Displaying important\u00a0data in the URL to the user can be harmful to your data security.<\/li>\n<\/ul>\n<p>Another way is to use the POST method. For this, you need to create an HTML form.<\/p>\n<p>If you want to avoid passing data into the URL or creating a form, leverage the use of <code>localStorage<\/code> with the simple JavaScript.<\/p>\n<p>So using localStorage,<\/p>\n<ul>\n<li>You don&#8217;t need to pass the data in URL.<\/li>\n<li>You don&#8217;t need to create the HTML form.<\/li>\n<\/ul>\n<h4 style=\"text-align: left;\">What is localStorage in JavaScript?<\/h4>\n<p>It is a property that allows you to store the data in a web browser for a session.<\/p>\n<h4 style=\"text-align: left;\">How does localStorage work?<\/h4>\n<p>With the localStorage property, we can save the data into the browser.\u00a0You can retrieve that data for the same or for any other web page.<\/p>\n<p>Here, local storage acts as an intermediate to save and read the data.<\/p>\n<p>JavaScript has simple functions to save and get the data. All the data saved in local storage is in the form of a key-value pair.<\/p>\n<h4 style=\"text-align: left;\">How to Pass the Data to Another Page withing passing it in URL?<\/h4>\n<p><strong>HTML and Javascript Code for testing localStorage:<\/strong><\/p>\n<pre class=\"brush: html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;body&gt;\n\n&lt;script&gt;\n\u00a0 \u00a0 \/\/ Check browser support\n\u00a0 \u00a0 if (typeof(Storage) !== \"undefined\") {\n\u00a0 \u00a0 \/\/ Store\n\u00a0 \u00a0 localStorage.setItem(\"programming\", \"Python\");\n\u00a0 \u00a0 }\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>Save it as <code>first.html<\/code>.<\/p>\n<p>It will save the data (programming(key)\/Python(value)) in the local browser.<\/p>\n<p><strong>Note:<\/strong> It is always good practice to check if your browser supports the localStorage property, though it is supported by most of the popular browsers.<\/p>\n<p>Now let&#8217;s write an HTML and JavaScript code to read this data.<\/p>\n<pre class=\"brush: html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;body&gt;\n\n&lt;div id=\"result\"&gt;&lt;\/div&gt;\n\n&lt;script&gt;\n\/\/ Check browser support\nif (typeof(Storage) !== \"undefined\") {\n\/\/ Retrieve\ndocument.getElementById(\"result\").innerHTML = localStorage.getItem(\"programming\");\n} else {\ndocument.getElementById(\"result\").innerHTML = \"Browser does not support Web Storage.\";\n}\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>Save it as <code>second.html<\/code>.<\/p>\n<p>Save both the files in a common directory. And open them in browser tabs. Using <code>second.html<\/code>, You are able to read the value you have set for\u00a0programming using\u00a0<code>first.html<\/code>.<\/p>\n<p><strong>Note:<\/strong> In the above code, we have added JavaScript code inside the HTML page itself. You can add it externally as well.<\/p>\n<h4>Important Points to Note about localStorage:<\/h4>\n<ul>\n<li>All the data saved using localStorage\u00a0is saved in the key-0value pair.<\/li>\n<li>It is a read-only property.<\/li>\n<li>Almost all the latest versions of popular browsers support this property.<\/li>\n<li>The data saved using this property does not have an expiration date.<\/li>\n<li>It is different from the sessionStorage JavaScript property. It saves the data for a particular session.<\/li>\n<li>Unlike sessionStorage, data saved using localStorage will not be deleted on the closing browser tag.<\/li>\n<\/ul>\n<p><strong>Other important topics from HTML:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.csestack.org\/basic-html-tags-example\/\">7 Basic HTML Tags with Example<\/a>\u00a0[Most Useful in Every Web page Development]<\/li>\n<li><a href=\"https:\/\/www.csestack.org\/practices-build-best-web-form-design\/\">20+ Best HTML Web Form Design Practices<\/a> [It Has Helped Me Grow Professionally]<\/li>\n<\/ul>\n<p>This is all about a quick tutorial to pass data to another page using JavaScript localStorage. If you have any question, feel free to discuss in the comment.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Simple code to pass data to another page using JavaScript localStorage. HTML Code example for passing data without URL.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,233],"tags":[180,210],"class_list":["post-3805","post","type-post","status-publish","format-standard","hentry","category-code","category-html-css","tag-html","tag-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>[Solved] How to Pass Data to Another Page using JavaScript LocalStorage?<\/title>\n<meta name=\"description\" content=\"Simple code to pass data to another page using JavaScript localStorage. HTML Code example for passing data without URL.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.csestack.org\/javascript-localstorage-pass-data-web-page\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] How to Pass Data to Another Page using JavaScript LocalStorage?\" \/>\n<meta property=\"og:description\" content=\"Simple code to pass data to another page using JavaScript localStorage. HTML Code example for passing data without URL.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.csestack.org\/javascript-localstorage-pass-data-web-page\/\" \/>\n<meta property=\"og:site_name\" content=\"CSEstack\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/aniruddha.ca\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/aniruddha.ca\" \/>\n<meta property=\"article:published_time\" content=\"2018-08-01T04:33:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-31T02:42:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.csestack.org\/wp-content\/uploads\/2024\/01\/csestack-blog.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Aniruddha Chaudhari\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ani_chaudhari\" \/>\n<meta name=\"twitter:site\" content=\"@ani_chaudhari\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aniruddha Chaudhari\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.csestack.org\\\/javascript-localstorage-pass-data-web-page\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.csestack.org\\\/javascript-localstorage-pass-data-web-page\\\/\"},\"author\":{\"name\":\"Aniruddha Chaudhari\",\"@id\":\"https:\\\/\\\/www.csestack.org\\\/#\\\/schema\\\/person\\\/634ef1a9c4f38b0d340c6d45fa771218\"},\"headline\":\"[Solved] How to Pass Data to Another Page using JavaScript LocalStorage?\",\"datePublished\":\"2018-08-01T04:33:49+00:00\",\"dateModified\":\"2021-01-31T02:42:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.csestack.org\\\/javascript-localstorage-pass-data-web-page\\\/\"},\"wordCount\":518,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\\\/\\\/www.csestack.org\\\/#\\\/schema\\\/person\\\/634ef1a9c4f38b0d340c6d45fa771218\"},\"keywords\":[\"HTML\",\"JavaScript\"],\"articleSection\":[\"Code\",\"HTML &amp; CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.csestack.org\\\/javascript-localstorage-pass-data-web-page\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.csestack.org\\\/javascript-localstorage-pass-data-web-page\\\/\",\"url\":\"https:\\\/\\\/www.csestack.org\\\/javascript-localstorage-pass-data-web-page\\\/\",\"name\":\"[Solved] How to Pass Data to Another Page using JavaScript LocalStorage?\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.csestack.org\\\/#website\"},\"datePublished\":\"2018-08-01T04:33:49+00:00\",\"dateModified\":\"2021-01-31T02:42:10+00:00\",\"description\":\"Simple code to pass data to another page using JavaScript localStorage. HTML Code example for passing data without URL.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.csestack.org\\\/javascript-localstorage-pass-data-web-page\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.csestack.org\\\/javascript-localstorage-pass-data-web-page\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.csestack.org\\\/javascript-localstorage-pass-data-web-page\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.csestack.org\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] How to Pass Data to Another Page using JavaScript LocalStorage?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.csestack.org\\\/#website\",\"url\":\"https:\\\/\\\/www.csestack.org\\\/\",\"name\":\"CSEstack\",\"description\":\"Computer Science &amp; Programming Portal\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.csestack.org\\\/#\\\/schema\\\/person\\\/634ef1a9c4f38b0d340c6d45fa771218\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.csestack.org\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.csestack.org\\\/#\\\/schema\\\/person\\\/634ef1a9c4f38b0d340c6d45fa771218\",\"name\":\"Aniruddha Chaudhari\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.csestack.org\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/Aniruddha-Chaudhari.jpg\",\"url\":\"https:\\\/\\\/www.csestack.org\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/Aniruddha-Chaudhari.jpg\",\"contentUrl\":\"https:\\\/\\\/www.csestack.org\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/Aniruddha-Chaudhari.jpg\",\"width\":634,\"height\":634,\"caption\":\"Aniruddha Chaudhari\"},\"logo\":{\"@id\":\"https:\\\/\\\/www.csestack.org\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/Aniruddha-Chaudhari.jpg\"},\"description\":\"I am a Python enthusiast who loves Linux and Vim. I hold a Master of Computer Science degree from NIT Trichy and have 10 years of experience in the IT industry, focusing on the Software Development Lifecycle from Requirements Gathering, Design, Development to Deployment. I have worked at IBM, Ericsson, and NetApp, and I share my knowledge on CSEstack.org.\",\"sameAs\":[\"https:\\\/\\\/www.csestack.org\",\"https:\\\/\\\/www.facebook.com\\\/aniruddha.ca\",\"pythonwithani\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/aniruddha28\\\/\",\"https:\\\/\\\/x.com\\\/ani_chaudhari\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCw0a__B0eJsvCujkSIfLTAA\"],\"url\":\"https:\\\/\\\/www.csestack.org\\\/author\\\/anicse\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] How to Pass Data to Another Page using JavaScript LocalStorage?","description":"Simple code to pass data to another page using JavaScript localStorage. HTML Code example for passing data without URL.","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:\/\/www.csestack.org\/javascript-localstorage-pass-data-web-page\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] How to Pass Data to Another Page using JavaScript LocalStorage?","og_description":"Simple code to pass data to another page using JavaScript localStorage. HTML Code example for passing data without URL.","og_url":"https:\/\/www.csestack.org\/javascript-localstorage-pass-data-web-page\/","og_site_name":"CSEstack","article_publisher":"https:\/\/www.facebook.com\/aniruddha.ca","article_author":"https:\/\/www.facebook.com\/aniruddha.ca","article_published_time":"2018-08-01T04:33:49+00:00","article_modified_time":"2021-01-31T02:42:10+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/www.csestack.org\/wp-content\/uploads\/2024\/01\/csestack-blog.jpg","type":"image\/jpeg"}],"author":"Aniruddha Chaudhari","twitter_card":"summary_large_image","twitter_creator":"@ani_chaudhari","twitter_site":"@ani_chaudhari","twitter_misc":{"Written by":"Aniruddha Chaudhari","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.csestack.org\/javascript-localstorage-pass-data-web-page\/#article","isPartOf":{"@id":"https:\/\/www.csestack.org\/javascript-localstorage-pass-data-web-page\/"},"author":{"name":"Aniruddha Chaudhari","@id":"https:\/\/www.csestack.org\/#\/schema\/person\/634ef1a9c4f38b0d340c6d45fa771218"},"headline":"[Solved] How to Pass Data to Another Page using JavaScript LocalStorage?","datePublished":"2018-08-01T04:33:49+00:00","dateModified":"2021-01-31T02:42:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.csestack.org\/javascript-localstorage-pass-data-web-page\/"},"wordCount":518,"commentCount":4,"publisher":{"@id":"https:\/\/www.csestack.org\/#\/schema\/person\/634ef1a9c4f38b0d340c6d45fa771218"},"keywords":["HTML","JavaScript"],"articleSection":["Code","HTML &amp; CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.csestack.org\/javascript-localstorage-pass-data-web-page\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.csestack.org\/javascript-localstorage-pass-data-web-page\/","url":"https:\/\/www.csestack.org\/javascript-localstorage-pass-data-web-page\/","name":"[Solved] How to Pass Data to Another Page using JavaScript LocalStorage?","isPartOf":{"@id":"https:\/\/www.csestack.org\/#website"},"datePublished":"2018-08-01T04:33:49+00:00","dateModified":"2021-01-31T02:42:10+00:00","description":"Simple code to pass data to another page using JavaScript localStorage. HTML Code example for passing data without URL.","breadcrumb":{"@id":"https:\/\/www.csestack.org\/javascript-localstorage-pass-data-web-page\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.csestack.org\/javascript-localstorage-pass-data-web-page\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.csestack.org\/javascript-localstorage-pass-data-web-page\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.csestack.org\/"},{"@type":"ListItem","position":2,"name":"[Solved] How to Pass Data to Another Page using JavaScript LocalStorage?"}]},{"@type":"WebSite","@id":"https:\/\/www.csestack.org\/#website","url":"https:\/\/www.csestack.org\/","name":"CSEstack","description":"Computer Science &amp; Programming Portal","publisher":{"@id":"https:\/\/www.csestack.org\/#\/schema\/person\/634ef1a9c4f38b0d340c6d45fa771218"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.csestack.org\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.csestack.org\/#\/schema\/person\/634ef1a9c4f38b0d340c6d45fa771218","name":"Aniruddha Chaudhari","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.csestack.org\/wp-content\/uploads\/2019\/03\/Aniruddha-Chaudhari.jpg","url":"https:\/\/www.csestack.org\/wp-content\/uploads\/2019\/03\/Aniruddha-Chaudhari.jpg","contentUrl":"https:\/\/www.csestack.org\/wp-content\/uploads\/2019\/03\/Aniruddha-Chaudhari.jpg","width":634,"height":634,"caption":"Aniruddha Chaudhari"},"logo":{"@id":"https:\/\/www.csestack.org\/wp-content\/uploads\/2019\/03\/Aniruddha-Chaudhari.jpg"},"description":"I am a Python enthusiast who loves Linux and Vim. I hold a Master of Computer Science degree from NIT Trichy and have 10 years of experience in the IT industry, focusing on the Software Development Lifecycle from Requirements Gathering, Design, Development to Deployment. I have worked at IBM, Ericsson, and NetApp, and I share my knowledge on CSEstack.org.","sameAs":["https:\/\/www.csestack.org","https:\/\/www.facebook.com\/aniruddha.ca","pythonwithani","https:\/\/www.linkedin.com\/in\/aniruddha28\/","https:\/\/x.com\/ani_chaudhari","https:\/\/www.youtube.com\/channel\/UCw0a__B0eJsvCujkSIfLTAA"],"url":"https:\/\/www.csestack.org\/author\/anicse\/"}]}},"_links":{"self":[{"href":"https:\/\/www.csestack.org\/wp-json\/wp\/v2\/posts\/3805","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.csestack.org\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.csestack.org\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.csestack.org\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.csestack.org\/wp-json\/wp\/v2\/comments?post=3805"}],"version-history":[{"count":9,"href":"https:\/\/www.csestack.org\/wp-json\/wp\/v2\/posts\/3805\/revisions"}],"predecessor-version":[{"id":8298,"href":"https:\/\/www.csestack.org\/wp-json\/wp\/v2\/posts\/3805\/revisions\/8298"}],"wp:attachment":[{"href":"https:\/\/www.csestack.org\/wp-json\/wp\/v2\/media?parent=3805"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.csestack.org\/wp-json\/wp\/v2\/categories?post=3805"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.csestack.org\/wp-json\/wp\/v2\/tags?post=3805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}