{"id":10397,"date":"2022-09-23T15:12:09","date_gmt":"2022-09-23T09:42:09","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/"},"modified":"2022-09-23T15:12:09","modified_gmt":"2022-09-23T09:42:09","slug":"solved-how-to-insert-save-to-favourites-feature-link-within-modal","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/","title":{"rendered":"[Solved] How to insert save to favourites feature link within modal?"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

An interesting question, I check the Nasa.api and i find that the sever will return you an array<\/code> that contain object<\/code>, so a good option is to use an array<\/code> to store all the liked item and it will be easier for you display.<\/p>\n

My suggestion for you is to directly store the info that nasa.api give to you to the array and store in localStorage<\/code>. It will be easier for you to display later.<\/p>\n

I also created an example for you that use nasa.api that you could use it since I doesn’t have your full code and how you get the code\/display it, but you could just see the part that how i modify the localStorage<\/p>\n

So in the example I created, every time user click on the liked button, it will save to liked<\/code> (array) and save to localStorage<\/code>. Every second time, user click the button , we will delete the item from the liked<\/code> array and update localStorage.<\/p>\n<\/p>\n

\n
\n
let source;\nlet xhr = new XMLHttpRequest();\nlet link = \"https:\/\/api.nasa.gov\/planetary\/apod?api_key=DEMO_KEY&count=5\"\nxhr.open('GET', link, true);\nxhr.send();\nlet liked = JSON.parse(localStorage.getItem(\"likeditem\"));\n\nif (liked == null) liked = [];\nxhr.onreadystatechange = function() {\n  if (xhr.readyState === 4) {\n    source = JSON.parse(xhr.responseText);\n    create()\n  }\n} \/\/Check if liked is null, if it is, assign empty array value to it.\n\nfunction create() {\n  for (let i = 0; i < source.length; i++) {\n    console.log(source[i])\n    document.body.innerHTML += `\n         <img src=${source[i].url}>\n         <div >${source[i].title}<\/div>\n         <div >Date: ${source[i].date}<\/div>\n          <div>Copyright: ${source[i].copyright}<\/div>\n          <div>Media_type: ${source[i].media_type}<\/div>\n          <div>Service_version: ${source[i].service_version}<\/div>\n         <div>Explanation: ${source[i].explanation}<\/div>\n          <button onclick='save(${i})'>Save to like<\/button>\n`\n    \/\/TO save\/remove liked item from local Storage when button clicked\n    window.save = function(index) {\n      let thisbutton = document.querySelectorAll('button')[index]\n      if (thisbutton.textContent == 'Save to like') {\n        liked.push(source[index])\n        localStorage.setItem('likeditem', JSON.stringify(liked));\n        thisbutton.textContent = \"Saved\"\n      } else {\n        \/\/Remove it from local storage when user click it every two times\n        liked.splice(liked.indexOf(source[index]), 1)\n        localStorage.setItem('likeditem', JSON.stringify(liked));\n        thisbutton.textContent=\"Save to like\"\n      }\n    }\n  }\n}<\/code><\/pre>\n<\/div>\n<\/div>\n
In term of how to display the element from localStorage, also an example.<\/p>\n
We have already saved all the info about the image to localStorage<\/code> before , so we just use the way we display the info from nasa.api.<\/p>\n<\/p>\n
\n
\n
let liked = JSON.parse(localStorage.getItem(\"likeditem\"));\n\nfor (let i in liked){\n\/\/Immediately return the for loop if no value stored in loal storage\nif(!liked) break;;\n        document.body.innerHTML += `\n         <img src=${liked[i].url}>\n         <div >${liked[i].title}<\/div>\n         <div >Date: ${liked[i].date}<\/div>\n          <div>Copyright: ${liked[i].copyright}<\/div>\n          <div>Media_type: ${liked[i].media_type}<\/div>\n          <div>Service_version: ${liked[i].service_version}<\/div>\n         <div>Explanation: ${liked[i].explanation}<\/div>\n          `\n}<\/code><\/pre>\n<\/div>\n<\/div>\n
Update:<\/p>\n
Save to localStorage:<\/p>\n
\"enter<\/a><\/p>\n
Display from localStorage:<\/p>\n
\"enter<\/a><\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            1<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved How to insert save to favourites feature link within modal? <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] An interesting question, I check the Nasa.api and i find that the sever will return you an array that contain object, so a good option is to use an array to store all the liked item and it will be easier for you display. My suggestion for you is to directly store the info … 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":[464,346,333,1224],"class_list":["post-10397","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-html","tag-javascript","tag-local-storage"],"yoast_head":"\n[Solved] How to insert save to favourites feature link within modal? - 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-how-to-insert-save-to-favourites-feature-link-within-modal\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] How to insert save to favourites feature link within modal? - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] An interesting question, I check the Nasa.api and i find that the sever will return you an array that contain object, so a good option is to use an array to store all the liked item and it will be easier for you display. My suggestion for you is to directly store the info ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-23T09:42:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/09\/Solved-How-to-insert-save-to-favourites-feature-link-within.png\" \/>\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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] How to insert save to favourites feature link within modal?\",\"datePublished\":\"2022-09-23T09:42:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/\"},\"wordCount\":227,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/09\/Solved-How-to-insert-save-to-favourites-feature-link-within.png\",\"keywords\":[\"css\",\"html\",\"javascript\",\"local-storage\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/\",\"name\":\"[Solved] How to insert save to favourites feature link within modal? - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/09\/Solved-How-to-insert-save-to-favourites-feature-link-within.png\",\"datePublished\":\"2022-09-23T09:42:09+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/#primaryimage\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/09\/Solved-How-to-insert-save-to-favourites-feature-link-within.png\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/09\/Solved-How-to-insert-save-to-favourites-feature-link-within.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] How to insert save to favourites feature link within modal?\"}]},{\"@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] How to insert save to favourites feature link within modal? - 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-how-to-insert-save-to-favourites-feature-link-within-modal\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] How to insert save to favourites feature link within modal? - JassWeb","og_description":"[ad_1] An interesting question, I check the Nasa.api and i find that the sever will return you an array that contain object, so a good option is to use an array to store all the liked item and it will be easier for you display. My suggestion for you is to directly store the info ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/","og_site_name":"JassWeb","article_published_time":"2022-09-23T09:42:09+00:00","og_image":[{"url":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/09\/Solved-How-to-insert-save-to-favourites-feature-link-within.png","type":"","width":"","height":""}],"author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] How to insert save to favourites feature link within modal?","datePublished":"2022-09-23T09:42:09+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/"},"wordCount":227,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"image":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/#primaryimage"},"thumbnailUrl":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/09\/Solved-How-to-insert-save-to-favourites-feature-link-within.png","keywords":["css","html","javascript","local-storage"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/","url":"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/","name":"[Solved] How to insert save to favourites feature link within modal? - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"primaryImageOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/#primaryimage"},"image":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/#primaryimage"},"thumbnailUrl":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/09\/Solved-How-to-insert-save-to-favourites-feature-link-within.png","datePublished":"2022-09-23T09:42:09+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/#primaryimage","url":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/09\/Solved-How-to-insert-save-to-favourites-feature-link-within.png","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/09\/Solved-How-to-insert-save-to-favourites-feature-link-within.png"},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-insert-save-to-favourites-feature-link-within-modal\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] How to insert save to favourites feature link within modal?"}]},{"@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\/10397","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=10397"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/10397\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=10397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=10397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=10397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}