{"id":22345646,"url":"https://github.com/gerhynes/localstorage","last_synced_at":"2025-07-25T06:09:00.698Z","repository":{"id":106046085,"uuid":"107052500","full_name":"gerhynes/localstorage","owner":"gerhynes","description":"A page built to practice working with localStorage and event delegation. Built for Wes Bos' JavaScript 30 course. ","archived":false,"fork":false,"pushed_at":"2018-01-21T11:32:18.000Z","size":7,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-11T20:43:47.832Z","etag":null,"topics":["event-delegation","javascript","javascript30","localstorage"],"latest_commit_sha":null,"homepage":"https://gk-hynes.github.io/localstorage/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gerhynes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-15T22:03:48.000Z","updated_at":"2018-01-23T21:45:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"a529ed5d-253d-4c91-bbd2-7c4ca4fddd61","html_url":"https://github.com/gerhynes/localstorage","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gerhynes/localstorage","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Flocalstorage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Flocalstorage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Flocalstorage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Flocalstorage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gerhynes","download_url":"https://codeload.github.com/gerhynes/localstorage/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Flocalstorage/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266963446,"owners_count":24013052,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-25T02:00:09.625Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["event-delegation","javascript","javascript30","localstorage"],"created_at":"2024-12-04T09:18:19.203Z","updated_at":"2025-07-25T06:09:00.673Z","avatar_url":"https://github.com/gerhynes.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [LocalStorage and Event Delegation](https://gk-hynes.github.io/localstorage/)\n\nA page built to practice working with localStorage and event delegation. Built for Wes Bos' [JavaScript 30](https://javascript30.com/) course.\n\n[![Screentshot of localStorage tapas site](https://res.cloudinary.com/gerhynes/image/upload/v1516213829/Screenshot-2018-1-17_LocalStorage_jnj6in.jpg)](https://gk-hynes.github.io/localstorage/)\n\n## Notes\n\nSelect the form and the unordered list and create an array to store the data.\n\nListen for the submit event on the form and run a function, `addItem`. Use `e.preventDefault()` to prevent the page from reloading.\n\nMake a variable, `item`, with `text` and a `done` status of `false` (so by default it is not checked).\n\nUse `(this.querySelector(\"[name=item]\")).value` to get the `text`.\n\nUse `this.reset()` to clear the input form.\n\nPush `item` into the `items` array.\n\nMake a second function, `populateList`. Pass in the items, with the default set to an empty array (so things don't crash if you submit without typing anything).\n\nYou also need a place to put the HTML so pass in the list of items as a destination.\n\nMap over the plates array and use `platesList.innerHTML` to put it into the HTML.\n\nReturn a list item with a label and call `.join(\"\")` on it (`map()` returns an array and you want a string).\n\nInclude `populateList` in `addItem` and pass it `items` and `itemsList`.\n\nOne downside to this is that it rerenders the entire list every time you update an item. Angular or React could get around this by only changing the minimum amount of HTML necessary.\n\nAbove each list item add an input with a type `checkbox`, a `data-index` set to the index, and an id set to `item${i}`.\n\nSet the label to `for=\"item${i}\"` so when you click on the label, the id will check itself.\n\nUse a ternary operator to check the checkbox as necessary: `${plate.done ? \"checked\" : \"\"}`\n\n### localStorage\n\nAt this stage, if you refresh the page the list won't persist.\n\nLocalStorage allows you to save text to the browser and access it when you reload the page.\n\nIf you try to just use `localStorage.setItem(\"items\", items)` you'll get `{object Object}`.\n\nLocalStorage is only a key value store. You can only use strings there. If you try to save something else there it will be converted to a string.\n\nYou need to stringify the array you are passing to localStorage.\n\n`localStorage.setItem(\"items\", JSON.stringify(items));`\n\nWhen extracting the data from localStorage, you can use `JSON.parse()` to take it from the string and return it to what it originally was.\n\nOn page load run `populateList` with `items` and `itemsList` passed as parameters.\n\nGet `items` from localStorage at page load by setting `items` to `JSON.parse(localStorage.getItem(\"items\")) || [];`. If there's nothing in localStorage an empty array will be created instead.\n\n### Event Delegation\n\nAt this stage, the toggled state of the items does not persist.\n\nMake a function, `toggleDone`.\n\nIf you just listen for a click on all inputs, it won't recognize any checkboxes created _after_ the event listeners were added.\n\nDon't listen for the checkboxes directly, listen for the unordered list and tell it to pass the clicks onto its child elements, the checkboxes:\n\n```js\nitemsList.addEventListener(\"click\", toggleDone);\n```\n\nEvent delegation is like telling a responsible parent to keep an eye on their irresponsible children.\n\nNow, if you click on the list item it will register a click on the label and on the checkbox.\n\nYou need to check if the target of `toggleDone` matches the thing you are looking for.\n\n```js\nif (!e.target.matches(\"input\")) return; // skip this target unless it's an input\n```\n\nGo to the `items` array, find the one that was checked, and set its `done` status to `true`.\n\n```js\nconst el = e.target;\nconst index = el.dataset.index;\nitems[index].done = !items[index].done;\n```\n\nUsing `JSON.stringify()` again, pass the updated data to localStorage, and run `populateList` to update the visible information.\n\n```js\nlocalStorage.setItem(\"items\", JSON.stringify(items));\npopulateList(items, itemsList);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerhynes%2Flocalstorage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgerhynes%2Flocalstorage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerhynes%2Flocalstorage/lists"}