{"id":18673,"date":"2020-06-30T03:45:17","date_gmt":"2020-06-30T10:45:17","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=18673"},"modified":"2023-12-01T03:36:41","modified_gmt":"2023-12-01T11:36:41","slug":"javascript-localstorage","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/","title":{"rendered":"JavaScript localStorage: A Guide"},"content":{"rendered":"\n

Web applications can get very complicated, very quickly. One thing I\u2019ve learned in my time as a developer is that there\u2019s a lot you can do with plain old JavaScript if you give it the chance.
<\/p>\n\n\n\n

The localStorage API is a powerful built-in function that removes the need to use databases for simple applications that don\u2019t need a server. We can use this API to save pieces of data locally which can be accessed by our application.
<\/p>\n\n\n\n

In this guide, we\u2019re going to talk about how to use the localStorage method in JavaScript. We\u2019ll run through an example of how to use localStorage to save the contents of a form for later on a web page. Let\u2019s get started!<\/p>\n\n\n\n

What Is localStorage?<\/h2>\n\n\n\n

localStorage is part of the web storage API. This API allows you to store data inside a user\u2019s browser which your application can access.
<\/p>\n\n\n\n

The storage API is useful because it means that you don\u2019t need to send every piece of data about a user\u2019s session to a database. If a user enables dark mode on your site, you can track that on the client side; if a user saves a form for later, you don\u2019t need to store the half-completed form in your database.
<\/p>\n\n\n\n

There are two types of web storage. localStorage is data that will stay in a user\u2019s browser window even after they close the browser tab. Unlike cookies, localStorage data is data with no expiration date. sessionStorage is data that lasts until a session expires, which means until the browser is closed. 
<\/p>\n\n\n\n

In this post, we are going to focus on the localStorage object. However, you can substitute this for sessionStorage because they both use the same syntax.<\/p>\n\n\n\n

How to Use localStorage<\/h2>\n\n\n\n

Before we delve into our example, let\u2019s walk through the methods offered by localStorage.
<\/p>\n\n\n\n

To create a localStorage entry, we can use a method called setItem()<\/code>:<\/p>\n\n\n\n

localStorage.setItem(\"name\", \"Linda Carlton\");\nconsole.log(localStorage);<\/pre><\/div>\n\n\n\n
Our code returns:<\/p>\n\n\n\n
{ name: \"Linda Carlton\", length: 1 }<\/pre><\/div>\n\n\n\n
localStorage stores items in key:value pairs. In our example, we have created an item called \u201cname\u201d. This item has the value \u201cLinda Carlton\u201d. 
<\/p>\n\n\n\n
We used a console.log()<\/code> statement to print out the contents of localStorage to make sure that our value has been added.
<\/p>\n\n\n\n
You can use this same code to update a value stored in localStorage.
<\/p>\n\n\n\n
To retrieve a particular value from localStorage, you can use the getItem()<\/code> method:<\/p>\n\n\n\n
localStorage.getItem(\"name\");<\/pre><\/div>\n\n\n\n
Our code returns: <\/p>\n\n\n\n
Linda Carlton.<\/pre><\/div>\n\n\n\n
There are two methods you can use to remove data from localStorage:
<\/p>\n\n\n\n
    \n
  • removeItem(): Removes a single item from localStorage<\/li>\n\n\n\n
  • clear(): Removes every item in localStorage()<\/li>\n<\/ul>\n\n\n\n
    If we want to remove our \u201cname\u201d item from local storage, we could use this code:<\/p>\n\n\n\n
    localStorage.removeItem(name);\nconsole.log(localStorage);<\/pre><\/div>\n\n\n\n
    Our code returns: <\/p>\n\n\n\n
    { length: 0 }<\/pre><\/div>\n\n\n\n
    Notice that even though we cleared our localStorage there is still one item stored: length. This tells us how many items are stored in localStorage. Now that we\u2019ve removed the \u201cname\u201d entry, there is nothing stored in localStorage.
    <\/p>\n\n\n\n
    It\u2019s also important to note that localStorage can only store strings.<\/p>\n\n\n\n
    Building a Form Saving Feature Using localStorage<\/h2>\n\n\n\n
    We\u2019ve all been on some websites that ask us to fill out a long form. Unless something is really important, I like to be able to go back to that form later. That\u2019s why so many sites have \u201csave form\u201d features that keep track of your form details for later.
    <\/p>\n\n\n\n
    While some of these probably track your data in a database, you can make a lightweight version using the localStorage method.<\/p>\n\n\n\n
    Create the Front End<\/h3>\n\n\n\n
    We\u2019re going to create a customer feedback form for a local tea house, The Little Tea House. Our first step is to create the front-end for our web application. Create a file called index.html and paste in the following code:<\/p>\n\n\n\n
    <!DOCTYPE html>\n<html>\n\t<head>\n    \t<title>The Little Tea House Feedback<\/title>\n    \t<link rel=\"stylesheet\" href=\".\/styles.css\" \/>\n\t<\/head>\n\t<body>\n    \t<div>\n        \t<h1>The Little Tea House: Customer Feedback<\/h1>\n        \t<p>How was your experience at The Little Tea House? We'd love to learn more!<\/p>\n        \t<form>\n            \t<label for=\"name\">Name: <\/label>\n            \t<input id=\"name\" type=\"text\" \/><br \/><br \/>\n            \t<label for=\"email\">Email: <\/label>\n            \t<input id=\"email\" type=\"email\" \/><br \/><br \/>\n            \t<label for=\"feedback\">Message: <\/label><br \/><br \/>\n            \t<textarea id=\"feedback\"><\/textarea><br \/><br \/>\n            \t<button id=\"saveButton\">Save form<\/button>\n            \t<button id=\"retrieveButton\">Retrieve form<\/button>\n        \t<\/form>\n    \t<\/div>\n    \t<script src=\".\/form.js\"><\/script>\n\t<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
    This code creates a basic HTML page with our form fields:
    <\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    Our site now has everything it needs, but we\u2019re going to add in a few styles to make it more aesthetically pleasing. Create a file called styles.css and paste in this code:<\/p>\n\n\n\n
    div {\n    margin-left: 15vw;\n    margin-right: 15vw;\n    background-color: lightblue;\n    padding: 20px;\n}<\/pre><\/div>\n\n\n\n
    Now go back to the website and refresh the page:
    <\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    As you can see, our form now appears in the center of our web page and has a blue background. It looks great! Now we\u2019re ready to start writing the JavaScript for this webpage.<\/p>\n\n\n\n
    Create a Form Saving Feature<\/h3>\n\n\n\n
    Our next step is to collect the values stored in our form fields. From above, our form fields have the IDs:
    <\/p>\n\n\n\n
      \n
    • name (our Name field)<\/li>\n\n\n\n
    • email (our Email field)<\/li>\n\n\n\n
    • feedback (our Message field)<\/li>\n<\/ul>\n\n\n\n
      We can use these IDs to retrieve the values from each of our form fields. Create a file called form.js and paste in this code:<\/p>\n\n\n\n
      var nameField = document.getElementById(\"name\");\nvar emailField = document.getElementById(\"email\");\nvar feedbackField = document.getElementById(\"feedback\");<\/pre><\/div>\n\n\n\n
      We\u2019re declaring these as \u201cvar\u201d variables because we are going to change their values later on. We\u2019re also going to retrieve our buttons so that we can make them clickable later in the tutorial:<\/p>\n\n\n\n
      var saveButton = document.getElementById(\"saveButton\");\nvar retrieveButton = document.getElementById(\"retrieveButton\");<\/pre><\/div>\n\n\n\n
      Our next step is to create a function which saves these values into localStorage when our button is pressed. We\u2019ll do this using the following code:<\/p>\n\n\n\n
      function saveResponses() {\n\tlocalStorage.setItem(\"name\", nameField.value);\n\tlocalStorage.setItem(\"email\", emailField.value);\n   \tlocalStorage.setItem(\"feedback\", feedbackField.value);\n}<\/pre><\/div>\n\n\n\n
      This code will not run until our saveResponses()<\/code> function is invoked. So, how do we make this happen? We\u2019ve got to link it up to our button. This code allows us to invoke our function when our button is clicked:<\/p>\n\n\n\n
      saveButton.addEventListener(\"click\", saveResponses);<\/pre><\/div>\n\n\n\n
      Now when we press our \u201cSave form\u201d button, our responses will be stored in localStorage.
      <\/p>\n\n\n\n
      But it\u2019s no use storing this data if we can\u2019t retrieve it. We\u2019re going to write a function that retrieves this data when the \u201cRetrieve form\u201d button is clicked:<\/p>\n\n\n\n
      function retrieveResponses() {\n\tnameField.value = localStorage.getItem(\"name\");\n   \temailField.value = localStorage.getItem(\"email\");\n    \tfeedbackField.value = localStorage.getItem(\"feedback\");\n}\nretrieveButton.addEventListener(\"click\", function(e) { e.preventDefault(); retrieveResponses(); });<\/pre><\/div>\n\n\n\n
      Great! This code sets the value of each of our form fields to that which is stored in localStorage if a value is available. Now, let\u2019s run our code and see what happens:<\/p>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      Our form looks the same. Try to insert some values into the form and press the button \u201cSave form\u201d. This will save your responses to the form.
      <\/p>\n\n\n\n
      Now, refresh your page and press \u201cRetrieve form\u201d. You\u2019ll notice that your form responses were saved! The information in localStorage will persist even if we close the tab. It will not be deleted when the browser is closed either. We did it!
      <\/p>\n\n\n\n
      These form responses will be saved until you either save your form again or clear your cache.
      <\/p>\n\n\n\n
      Note: You should not use this technique to store sensitive information. All data in localStorage is stored in plain text, which means it is accessible to any user who reads it.<\/em><\/p>\n\n\n\n
      Conclusion<\/h2>\n\n\n\n
      The localStorage method allows you to store data locally in JavaScript. For simple applications like a to-do list, saving user preferences, or saving a user\u2019s form data (not including sensitive data), it\u2019s much better than using a database. localStorage is easy to set up, easy to use and is 100% vanilla JavaScript.
      <\/p>\n\n\n\n
      Now you\u2019re ready to start using the localStorage method like an expert JavaScript developer!<\/p>\n","protected":false},"excerpt":{"rendered":"Web applications can get very complicated, very quickly. One thing I\u2019ve learned in my time as a developer is that there\u2019s a lot you can do with plain old JavaScript if you give it the chance. The localStorage API is a powerful built-in function that removes the need to use databases for simple applications that…","protected":false},"author":240,"featured_media":18674,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-18673","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":"","is_sponser_post":"","is_guest_post":""},"yoast_head":"\nJavaScript localStorage: A Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"localStorage is a method in the JavaScript web storage API. It allows you to store data in a user\u2019s browser. On Career Karma, learn how to use the localStorage method.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript localStorage: A Guide\" \/>\n<meta property=\"og:description\" content=\"localStorage is a method in the JavaScript web storage API. It allows you to store data in a user\u2019s browser. On Career Karma, learn how to use the localStorage method.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-30T10:45:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T11:36:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/mark-s-TkEPQPWr2sY-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"679\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"JavaScript localStorage: A Guide\",\"datePublished\":\"2020-06-30T10:45:17+00:00\",\"dateModified\":\"2023-12-01T11:36:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/\"},\"wordCount\":1153,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/mark-s-TkEPQPWr2sY-unsplash.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/\",\"name\":\"JavaScript localStorage: A Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/mark-s-TkEPQPWr2sY-unsplash.jpg\",\"datePublished\":\"2020-06-30T10:45:17+00:00\",\"dateModified\":\"2023-12-01T11:36:41+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"localStorage is a method in the JavaScript web storage API. It allows you to store data in a user\u2019s browser. On Career Karma, learn how to use the localStorage method.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/mark-s-TkEPQPWr2sY-unsplash.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/mark-s-TkEPQPWr2sY-unsplash.jpg\",\"width\":1020,\"height\":679},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/careerkarma.com\/blog\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript localStorage: A Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript localStorage: A Guide | Career Karma","description":"localStorage is a method in the JavaScript web storage API. It allows you to store data in a user\u2019s browser. On Career Karma, learn how to use the localStorage method.","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:\/\/careerkarma.com\/blog\/javascript-localstorage\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript localStorage: A Guide","og_description":"localStorage is a method in the JavaScript web storage API. It allows you to store data in a user\u2019s browser. On Career Karma, learn how to use the localStorage method.","og_url":"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-06-30T10:45:17+00:00","article_modified_time":"2023-12-01T11:36:41+00:00","og_image":[{"width":1020,"height":679,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/mark-s-TkEPQPWr2sY-unsplash.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"JavaScript localStorage: A Guide","datePublished":"2020-06-30T10:45:17+00:00","dateModified":"2023-12-01T11:36:41+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/"},"wordCount":1153,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/mark-s-TkEPQPWr2sY-unsplash.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/javascript-localstorage\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/","url":"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/","name":"JavaScript localStorage: A Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/mark-s-TkEPQPWr2sY-unsplash.jpg","datePublished":"2020-06-30T10:45:17+00:00","dateModified":"2023-12-01T11:36:41+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"localStorage is a method in the JavaScript web storage API. It allows you to store data in a user\u2019s browser. On Career Karma, learn how to use the localStorage method.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/javascript-localstorage\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/mark-s-TkEPQPWr2sY-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/mark-s-TkEPQPWr2sY-unsplash.jpg","width":1020,"height":679},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/javascript-localstorage\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript localStorage: A Guide"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=18673"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18673\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/18674"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=18673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=18673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=18673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}