{"id":20951,"date":"2014-06-11T15:01:13","date_gmt":"2014-06-11T07:01:13","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=20951"},"modified":"2025-04-04T01:54:26","modified_gmt":"2025-04-03T17:54:26","slug":"html5-offline-storage","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/html5-offline-storage\/","title":{"rendered":"Mastering HTML5 Offline Storage for Your Website"},"content":{"rendered":"<p>HTML5 introduces many new features, and one of the most exciting is <strong>Offline Storage<\/strong>. In this article, we\u2019ll explore two key types of offline storage: sessionStorage and <a href=\"https:\/\/www.hongkiat.com\/blog\/jquery-cookies\/\">localStorage<\/a>. <strong>Offline Storage<\/strong> allows us to save data directly in the user\u2019s browser, enabling our web apps or games to function without an internet connection for a certain period of time.<\/p>\n<p>In practical terms, developers can use Offline Storage as a backup mechanism when the Internet connection is unavailable. Once connectivity is restored, they can seamlessly sync the stored data with the online server.<\/p>\n<p>If you\u2019re wondering how to implement this powerful feature on your website, read on for a comprehensive guide.<\/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\/offline-wordpress-editor-marsedit\/\" class=\"ref-block__link\" title=\"Read More: MarsEdit: Offline WordPress Editor For Mac (Review)\" rel=\"bookmark\"><span class=\"screen-reader-text\">MarsEdit: Offline WordPress Editor For Mac (Review)<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/offline-wordpress-editor-marsedit.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-47209 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/offline-wordpress-editor-marsedit.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">MarsEdit: Offline WordPress Editor For Mac (Review)<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tA quick look at MarsEdit and its helpful features.\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>SessionStorage<\/h2>\n<p><strong>sessionStorage<\/strong> is a type of storage that temporarily holds data in the browser. This data is stored as key-value pairs and is specific to the browser window or tab. As long as the browser or tab remains open, the data persists unless we intentionally erase it or <strong>close the browser<\/strong>.<\/p>\n<p>To store data in sessionStorage, we can use <code>.setItem()<\/code>. Here\u2019s an example where we store \u201cHello World\u201d.<\/p>\n<pre>\r\nsessionStorage.setItem(\"keyExample\", \"Hello World\");\r\n<\/pre>\n<p>Alternatively, we can also do the following, which creates a data entry with <code>anotherKeyName<\/code> as the key and <strong>\u2018Hello Too\u2019<\/strong> as the value.<\/p>\n<pre>\r\nsessionStorage.anotherKeyExample = \"Hello Too\";\r\n<\/pre>\n<p>In Webkit-based browsers like Safari, Chrome, and Opera, you can view the data under the <strong>Resources<\/strong> tab. In Firefox, it appears under the Firebug DOM tab.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-offline-storage\/set-sessionstorage.jpg\" height=\"180\" width=\"500\" alt=\"Setting sessionStorage in browser\"><\/figure>\n<p>Note that sessionStorage can only store strings or plain text. An <code>integer<\/code> will be converted to a string.<\/p>\n<p>If you have JSON data, you need to format it as a string using <code>JSON.stringify()<\/code> and retrieve it using <code>JSON.parse()<\/code> to convert the string back to JSON. Here are a few examples:<\/p>\n<pre>\r\nvar json = JSON.stringify([1, 2, 3]);\r\nsessionStorage.anotherKeyExample = json;\r\n<\/pre>\n<h3>Retrieving Data in sessionStorage<\/h3>\n<p>We have two ways to retrieve data from sessionStorage. First, we can use <code>.getItem()<\/code> or directly reference the key name, as shown below.<\/p>\n<pre>\r\nvar a = sessionStorage.getItem(\"keyExample\");\r\nvar b = sessionStorage.anotherKeyExample;\r\n<\/pre>\n<h3>Deleting Data in sessionStorage<\/h3>\n<p>As mentioned, the data in sessionStorage is deleted when the user closes the browser window or tab. However, we can also delete it intentionally. We can use the <code>.removeItem()<\/code> method or the <code>delete<\/code> directive, like this:<\/p>\n<pre>\r\nsessionStorage.removeItem(\"keyExample\");\r\ndelete sessionStorage.anotherKeyExample;\r\n<\/pre>\n<h2>LocalStorage<\/h2>\n<p><strong>localStorage<\/strong> allows us to store data in the browser persistently. Unlike sessionStorage, localStorage data remains in the browser until we intentionally remove it.<\/p>\n<p>Storing data in localStorage is just as simple as in sessionStorage. The process is identical, except we use the <code>localStorage<\/code> object. We can create a data entry using the <code>.setItem()<\/code> method or by directly setting it with the key name, like this:<\/p>\n<pre>\r\nlocalStorage.setItem(\"keyName\", \"Hello, Local Storage\");\r\nlocalStorage.anotherKeyName = 1;\r\n<\/pre>\n<p>To retrieve data, we use the <code>.getItem()<\/code> method.<\/p>\n<pre>\r\nvar c = localStorage.getItem(\"keyName\");\r\nvar d = localStorage.anotherKeyName;\r\n<\/pre>\n<p>Similarly, we can remove a data entry from localStorage using the <code>.removeItem()<\/code> method or the <code>delete<\/code> directive.<\/p>\n<pre>\r\nlocalStorage.removeItem(\"keyName\");\r\ndelete localStorage.anotherKeyName;\r\n<\/pre>\n<h2>Offline Storage Limit Size<\/h2>\n<p>Both sessionStorage and localStorage have limits in terms of maximum capacity, and each browser has its own limit. Firefox, Chrome, and Opera have a limit of <strong>5MB<\/strong> per domain. Internet Explorer offers more space with 10MB per domain. Ensure that your data does not exceed these limits. If your data does exceed the limit, you might want to consider alternatives such as <strong>SQLite<\/strong>.<\/p>\n<h2>Feature Detection<\/h2>\n<p>Although support for sessionStorage and localStorage is quite extensive (even IE8 supports them), it is wise to perform browser feature detection before using these storage methods. This way, you can implement a fallback function, like using Cookies, in case the browser does not support Offline Storage.<\/p>\n<p>You can <a href=\"https:\/\/www.hongkiat.com\/blog\/modernizr\/\">use Modernizr<\/a> for this purpose or wrap your script with a conditional statement like this:<\/p>\n<pre>\r\nif (window.localStorage) {\r\n    \/\/ localStorage is available\r\n} else {\r\n    alert('localStorage is not available');\r\n}\r\n<\/pre>\n<h2>Conclusion<\/h2>\n<p>Offline Storage is a fantastic feature that allows web apps and games to function offline. We\u2019ve also demonstrated how to use it in real-world examples in the past.<\/p>\n<p class=\"note\"><strong>Check these out<\/strong>: <a href=\"https:\/\/www.hongkiat.com\/blog\/jquery-cookies\/\">How To Use Cookie & HTML5 LocalStorage<\/a> & <a href=\"https:\/\/www.hongkiat.com\/blog\/html5-editable-content\/\">Edit Web Content On Front-End<\/a>.<\/p>\n<p>I hope this short article helps you get started with Offline Storage.<\/p>","protected":false},"excerpt":{"rendered":"<p>HTML5 introduces many new features, and one of the most exciting is Offline Storage. In this article, we\u2019ll explore two key types of offline storage: sessionStorage and localStorage. Offline Storage allows us to save data directly in the user\u2019s browser, enabling our web apps or games to function without an internet connection for a certain&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":[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>Mastering HTML5 Offline Storage for Your Website - Hongkiat<\/title>\n<meta name=\"description\" content=\"HTML5 introduces many new features, and one of the most exciting is Offline Storage. In this article, we&#039;ll explore two key types of offline storage:\" \/>\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\/html5-offline-storage\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mastering HTML5 Offline Storage for Your Website\" \/>\n<meta property=\"og:description\" content=\"HTML5 introduces many new features, and one of the most exciting is Offline Storage. In this article, we&#039;ll explore two key types of offline storage:\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/html5-offline-storage\/\" \/>\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=\"2014-06-11T07:01:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:54:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/html5-offline-storage\/set-sessionstorage.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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-offline-storage\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-offline-storage\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Mastering HTML5 Offline Storage for Your Website\",\"datePublished\":\"2014-06-11T07:01:13+00:00\",\"dateModified\":\"2025-04-03T17:54:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-offline-storage\\\/\"},\"wordCount\":620,\"commentCount\":9,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-offline-storage\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-offline-storage\\\/set-sessionstorage.jpg\",\"keywords\":[\"HTML\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-offline-storage\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-offline-storage\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-offline-storage\\\/\",\"name\":\"Mastering HTML5 Offline Storage for Your Website - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-offline-storage\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-offline-storage\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-offline-storage\\\/set-sessionstorage.jpg\",\"datePublished\":\"2014-06-11T07:01:13+00:00\",\"dateModified\":\"2025-04-03T17:54:26+00:00\",\"description\":\"HTML5 introduces many new features, and one of the most exciting is Offline Storage. In this article, we'll explore two key types of offline storage:\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-offline-storage\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-offline-storage\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-offline-storage\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-offline-storage\\\/set-sessionstorage.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-offline-storage\\\/set-sessionstorage.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-offline-storage\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mastering HTML5 Offline Storage for Your Website\"}]},{\"@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":"Mastering HTML5 Offline Storage for Your Website - Hongkiat","description":"HTML5 introduces many new features, and one of the most exciting is Offline Storage. In this article, we'll explore two key types of offline storage:","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\/html5-offline-storage\/","og_locale":"en_US","og_type":"article","og_title":"Mastering HTML5 Offline Storage for Your Website","og_description":"HTML5 introduces many new features, and one of the most exciting is Offline Storage. In this article, we'll explore two key types of offline storage:","og_url":"https:\/\/www.hongkiat.com\/blog\/html5-offline-storage\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-06-11T07:01:13+00:00","article_modified_time":"2025-04-03T17:54:26+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/html5-offline-storage\/set-sessionstorage.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":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/html5-offline-storage\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-offline-storage\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Mastering HTML5 Offline Storage for Your Website","datePublished":"2014-06-11T07:01:13+00:00","dateModified":"2025-04-03T17:54:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-offline-storage\/"},"wordCount":620,"commentCount":9,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-offline-storage\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-offline-storage\/set-sessionstorage.jpg","keywords":["HTML"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/html5-offline-storage\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/html5-offline-storage\/","url":"https:\/\/www.hongkiat.com\/blog\/html5-offline-storage\/","name":"Mastering HTML5 Offline Storage for Your Website - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-offline-storage\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-offline-storage\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-offline-storage\/set-sessionstorage.jpg","datePublished":"2014-06-11T07:01:13+00:00","dateModified":"2025-04-03T17:54:26+00:00","description":"HTML5 introduces many new features, and one of the most exciting is Offline Storage. In this article, we'll explore two key types of offline storage:","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-offline-storage\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/html5-offline-storage\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/html5-offline-storage\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/html5-offline-storage\/set-sessionstorage.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-offline-storage\/set-sessionstorage.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/html5-offline-storage\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Mastering HTML5 Offline Storage for Your Website"}]},{"@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-5rV","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20951","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=20951"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20951\/revisions"}],"predecessor-version":[{"id":73698,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20951\/revisions\/73698"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=20951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=20951"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=20951"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=20951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}