{"id":18685,"date":"2013-11-21T18:01:49","date_gmt":"2013-11-21T10:01:49","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=18685"},"modified":"2025-04-04T01:38:28","modified_gmt":"2025-04-03T17:38:28","slug":"jquery-cookies","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/jquery-cookies\/","title":{"rendered":"How to Use Cookie &#038; HTML5 localStorage"},"content":{"rendered":"<p>In a previous post, Jake shared a tutorial on <strong><a href=\"https:\/\/www.hongkiat.com\/blog\/introjs-step-by-step-guide-tutorial\/\">building a step-by-step guide using Intro.js<\/a><\/strong>. One of our readers posed a question, asking how they can make the guide appear only once. In other words, once a user has completed the guide, the guide <strong>will not appear again in subsequent visits<\/strong> by the same user.<\/p>\n<p>There are numerous ways to achieve this, but in this tutorial, we\u2019ll just be using <strong>Cookie<\/strong> and <strong>localStorage<\/strong>. Briefly speaking, both Cookie and localStorage store some information in the browser, which can be used to determine whether to display the step-by-step guide or not.<\/p>\n<p>Let\u2019s get started, shall we?<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/html5-editable-content\/\" class=\"ref-block__link\" title=\"Read More: How to Edit Web Content with HTML5\u2019s Contenteditable Attribute\" rel=\"bookmark\"><span class=\"screen-reader-text\">How to Edit Web Content with HTML5\u2019s Contenteditable Attribute<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/html5-editable-content.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-15550 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/html5-editable-content.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">How to Edit Web Content with HTML5\u2019s Contenteditable Attribute<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tOne of the new features in HTML5 is the native front-end editor. This feature is commonly used in...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Using Cookie<\/h2>\n<p>We will use the jQuery Cookie plugin to make the code look simpler. Download jQuery Cookie <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/carhartl\/jquery-cookie\">here<\/a>, and put it in your HTML document along with jQuery, like so.<\/p>\n<pre>\r\n &lt;script src=\"jquery.js\"&gt;&lt;\/script&gt;\r\n &lt;script src=\"jquery.cookie.js\"&gt;&lt;\/script&gt;\r\n <\/pre>\n<p>Then, we need to specify the <code>name<\/code> of our Cookie and also retrieve its <code>value<\/code>, which will be used later as reference when we run the IntroJs function.<\/p>\n<p>In this example, we will name the Cookie <code>IntroJS<\/code> and store it in a variable called <code>name<\/code> while the value will be stored in a variable called <code>value<\/code>.<\/p>\n<pre>\r\n var name = 'IntroJS';\r\n var value = $.cookie(name);\r\n <\/pre>\n<p>Next, using the <code>.oncomplete()<\/code> method that is provided in IntroJS, we can set a Cookie in the browser. Using the following code as an example, once the user has clicked the <span class=\"key\">Done<\/span> button on the tooltip, a Cookie named IntroJS will be created with the value of one.<\/p>\n<pre>\r\n introJs().start().oncomplete(function() {\r\n $.cookie(name, 1);\r\n }\r\n <\/pre>\n<p>Now, refresh the browser and complete the the guide. If you are using Google Chrome, just go to <strong>View &gt; Developer &gt; Developer Tools &gt; Resources (Tab)<\/strong> \u2013 you can see that a Cookie has been created (screenshot).<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-cookies\/jquery-cookies.jpg\" alt=\"jquery cookies\" width=\"500\" height=\"200\"><\/figure>\n<p>As previously mentioned, we do not want the guide to appear again to users who have already completed the guide before. To do that, wrap the IntroJS function with a conditional function to run IntroJS function <em>only if<\/em> the Cookie named <code>IntroJS<\/code> is not set in the browser.<\/p>\n<pre>if (value == null) {\r\n    introJs().start().oncomplete(function() {\r\n        $.cookie(name, 1);\r\n    });\r\n}\r\n<\/pre>\n<p>However, the downside of using Cookie is that it will expire. Unless explicitly specified, the Cookie will become a <strong>Session Coookie<\/strong>, which means that it will be deleted when the user closes the browser.<\/p>\n<p>Even if the expiration time is specified, this is still also not an ideal solution as the Cookie will still be removed eventually. So, let us now take a look at a second (better) solution, i.e. using <strong>localStorage<\/strong>.<\/p>\n<h2>Using HTML5 localStorage<\/h2>\n<p>Briefly speaking, <strong>localStorage<\/strong> works somewhat like a database; it stores some pieces of data \u2013 key and value \u2013 locally on the user\u2019s browser, which then can be retrieved using JavaScript API. <strong>Unlike Cookie, localStorage is persistent.<\/strong><\/p>\n<p>The data will always be available inside the user\u2019s browser, even after the user has closed the browser. localStorage also accepts more data than Cookies.<\/p>\n<p>To get started, Let\u2019s first set the key name and value. For your information, we use <code>.getItem()<\/code> to retrieve the value from a localStorage key.<\/p>\n<pre>\r\n var name = 'IntroJS';\r\n var value = localStorage.getItem(name);\r\n <\/pre>\n<p>Similar to our first example with Cookie, we will run the <code>IntroJS<\/code> function only when there\u2019s no specified data. In other words, once the data has been set, the guide should not appear. Using localStorage, we can set the data with <code>.setItem()<\/code>, like so.<\/p>\n<pre>if (value == null) {\r\n    introJs().start().oncomplete(function() {\r\n        localStorage.setItem(name, 1);\r\n    });\r\n};\r\n<\/pre>\n<p>Now, refresh your browser and complete the step-by-step guide. Then, go to <strong>View &gt; Developer &gt; Developer Tool &gt; Resources (Tab)<\/strong> \u2013 in the LocalStorage section, you should find a new key and that its value has already been set.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-cookies\/local-storage.jpg\" alt=\"local storage\" width=\"500\" height=\"200\"><\/figure>\n<p>Please note that localStorage is a relatively new technology \u2013 according to CanIUse.com, localStorage is only supported (at the time of this writing) in the following browsers: <strong>IE8+, Firefox 3.5+, Chrome 4.0+, Safari 4.0+, and Opera 10.5+<\/strong>.<\/p>\n<p>If, for any reason, you need to cater to users with older browsers, you can use localStorage in conjunction with Cookies. Here is a sample code:<\/p>\n<pre>\/\/ Variable declaration\r\nvar name = 'IntroJS';\r\n\r\n\/\/ Get value from local storage or cookie\r\nvar value = localStorage.getItem(name) || $.cookie(name);\r\n\r\n\/\/ Function to set value in local storage or cookie\r\nvar func = function() {\r\n  if (Modernizr.localstorage) { \/\/ If localstorage is supported\r\n    localStorage.setItem(name, 1); \/\/ set the item in local storage\r\n  } else { \/\/ If localstorage is not supported\r\n    $.cookie(name, 1, { \/\/ set the item in cookie\r\n      expires: 365 \/\/ cookie will expire after 365 days\r\n    });\r\n  }\r\n};\r\n\r\n\/\/ If value is null, start introJs and set value on completion or exit\r\nif(value == null) {\r\n  introJs().start().oncomplete(func).onexit(func);\r\n}\r\n<\/pre>\n<p>This code uses <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/modernizr.com\/\">Modernizr<\/a> to detect the browser\u2019s features. It will use localStorage if the browser supports it; otherwise, it will resort to using Cookies.<\/p>\n<p>And that\u2019s it, folks. We hope that you have found this tutorial helpful. For further reference, you can have a look at our previous <a href=\"https:\/\/www.hongkiat.com\/blog\/modernizr\/\">tutorial on Modernizr<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>In a previous post, Jake shared a tutorial on building a step-by-step guide using Intro.js. One of our readers posed a question, asking how they can make the guide appear only once. In other words, once a user has completed the guide, the guide will not appear again in subsequent visits by the same user.&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[506],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Use Cookie &amp; HTML5 localStorage - Hongkiat<\/title>\n<meta name=\"description\" content=\"In a previous post, Jake shared a tutorial on building a step-by-step guide using Intro.js. One of our readers posed a question, asking how they can make\" \/>\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.hongkiat.com\/blog\/jquery-cookies\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Cookie &amp; HTML5 localStorage\" \/>\n<meta property=\"og:description\" content=\"In a previous post, Jake shared a tutorial on building a step-by-step guide using Intro.js. One of our readers posed a question, asking how they can make\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/jquery-cookies\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-11-21T10:01:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:38:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-cookies\/jquery-cookies.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-cookies\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-cookies\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Use Cookie &#038; HTML5 localStorage\",\"datePublished\":\"2013-11-21T10:01:49+00:00\",\"dateModified\":\"2025-04-03T17:38:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-cookies\\\/\"},\"wordCount\":687,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-cookies\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-cookies\\\/jquery-cookies.jpg\",\"keywords\":[\"HTML\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-cookies\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-cookies\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-cookies\\\/\",\"name\":\"How to Use Cookie & HTML5 localStorage - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-cookies\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-cookies\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-cookies\\\/jquery-cookies.jpg\",\"datePublished\":\"2013-11-21T10:01:49+00:00\",\"dateModified\":\"2025-04-03T17:38:28+00:00\",\"description\":\"In a previous post, Jake shared a tutorial on building a step-by-step guide using Intro.js. One of our readers posed a question, asking how they can make\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-cookies\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-cookies\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-cookies\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-cookies\\\/jquery-cookies.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-cookies\\\/jquery-cookies.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-cookies\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use Cookie &#038; HTML5 localStorage\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Use Cookie & HTML5 localStorage - Hongkiat","description":"In a previous post, Jake shared a tutorial on building a step-by-step guide using Intro.js. One of our readers posed a question, asking how they can make","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.hongkiat.com\/blog\/jquery-cookies\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Cookie & HTML5 localStorage","og_description":"In a previous post, Jake shared a tutorial on building a step-by-step guide using Intro.js. One of our readers posed a question, asking how they can make","og_url":"https:\/\/www.hongkiat.com\/blog\/jquery-cookies\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-11-21T10:01:49+00:00","article_modified_time":"2025-04-03T17:38:28+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/jquery-cookies\/jquery-cookies.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-cookies\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-cookies\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Use Cookie &#038; HTML5 localStorage","datePublished":"2013-11-21T10:01:49+00:00","dateModified":"2025-04-03T17:38:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-cookies\/"},"wordCount":687,"commentCount":5,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-cookies\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-cookies\/jquery-cookies.jpg","keywords":["HTML"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/jquery-cookies\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-cookies\/","url":"https:\/\/www.hongkiat.com\/blog\/jquery-cookies\/","name":"How to Use Cookie & HTML5 localStorage - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-cookies\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-cookies\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-cookies\/jquery-cookies.jpg","datePublished":"2013-11-21T10:01:49+00:00","dateModified":"2025-04-03T17:38:28+00:00","description":"In a previous post, Jake shared a tutorial on building a step-by-step guide using Intro.js. One of our readers posed a question, asking how they can make","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-cookies\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/jquery-cookies\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-cookies\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/jquery-cookies\/jquery-cookies.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-cookies\/jquery-cookies.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-cookies\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Use Cookie &#038; HTML5 localStorage"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4Rn","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18685","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=18685"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18685\/revisions"}],"predecessor-version":[{"id":73635,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18685\/revisions\/73635"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=18685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=18685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=18685"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=18685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}