Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Created Local Persistence Example
- Loading branch information
Showing
5 changed files
with
228 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
|
|
||
| <!doctype html> | ||
|
|
||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
|
|
||
| <title>Contacts</title> | ||
| <meta name="description" content="Contacts"> | ||
| <meta name="author" content="Mark J Tyers"> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <script src="script.js"></script> | ||
| </head> | ||
| <body> | ||
| <main> | ||
| <header> | ||
| <h1>Contacts</h1> | ||
| </header> | ||
| <nav> | ||
| <h2>My Contacts</h2> | ||
| <ol> | ||
| <li>Mr Ted</li> | ||
| <li>Sir Moo</li> | ||
| </ol> | ||
| </nav> | ||
| <article> | ||
| <form> | ||
| <input type="hidden" name="key" /> | ||
| <p><label for="name">Name</label> | ||
| <input name="name" type="text" autofocus /></p> | ||
| <p><label for="email">Email</label> | ||
| <input name="email" type="email" /></p> | ||
| <p> | ||
| <button id="submit" type="submit">Add Record</button> | ||
| <button id="delete" type="submit">Delete Record</button> | ||
| </p> | ||
| </form> | ||
| <table></table> | ||
| </article> | ||
| </main> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
|
|
||
| 'use strict' | ||
|
|
||
| const minNameLength = 3 | ||
| const minEmailLength = 10 | ||
|
|
||
| document.addEventListener('DOMContentLoaded', async() => getAll()) | ||
|
|
||
| function selectContact(e) { | ||
| // We access the id attribute of the link we clicked | ||
| const key = e.target.getAttribute('id') | ||
| // And use this to retrieve the relevant record | ||
| const data = JSON.parse(localStorage.getItem(key)) | ||
| // Now we insert the data into the form | ||
| document.querySelector('input[name="name"]').value = data.name | ||
| document.querySelector('input[name="email"]').value = data.email | ||
| document.querySelector('input[name="key"]').value = key | ||
| // now we change the text on the button and rewire the event handler | ||
| document.querySelector('button#submit').innerHTML = 'Update Record' | ||
| document.querySelector('button#submit').onclick = updateContact | ||
| // finally we reveal the delete button | ||
| document.querySelector('button#delete').classList.remove('hidden') | ||
| return false | ||
| } | ||
|
|
||
| function updateContact() { | ||
| // we grab all the data from the form's input boxes into an object | ||
| const data = Array.from(document.querySelectorAll('input')).reduce( (acc, val) => { | ||
| if(val.name !== 'key') acc[val.name] = val.value | ||
| return acc | ||
| }, {}) | ||
| // next we get the record key stored in the hidden field | ||
| const key = document.querySelector('input[name="key"]').value | ||
| // and finally store the updated data using the same key | ||
| localStorage.setItem(key, JSON.stringify(data)) | ||
| // lastly we reload the contact list | ||
| getAll() | ||
| return false | ||
| } | ||
|
|
||
| function deleteContact() { | ||
| // we get the record key stored in the hidden field | ||
| const key = document.querySelector('input[name="key"]').value | ||
| // and delete that object from localstorage | ||
| localStorage.removeItem(key) | ||
| // lastly we reload the contacts list | ||
| getAll() | ||
| return false | ||
| } | ||
|
|
||
| function clearForm() { | ||
| // we delete the data from all the input boxes | ||
| document.querySelector('input[name="name"]').value = '' | ||
| document.querySelector('input[name="email"]').value = '' | ||
| // return the cursor focus to the name field | ||
| document.querySelector('input[name="name"]').focus() | ||
| // change the button text | ||
| document.querySelector('button').innerHTML = 'Add Record' | ||
| // wire the button to the add function | ||
| document.querySelector('button').onclick = addContact | ||
| document.querySelector('button#delete').onclick = deleteContact | ||
| // hide the delete button | ||
| document.querySelector('button#delete').classList.add('hidden') | ||
| } | ||
|
|
||
| function addContact() { | ||
| if (document.querySelector('input[name="name"]').value.length < minNameLength) return false | ||
| if (document.querySelector('input[name="email"]').value.length < minEmailLength) return false | ||
| const data = Array.from(document.querySelectorAll('input')).reduce( (acc, val) => { | ||
| if(val.name !== 'key') acc[val.name] = val.value | ||
| return acc | ||
| }, {}) | ||
| const key = getHash() | ||
| localStorage.setItem(key, JSON.stringify(data)) | ||
| getAll() | ||
| return false | ||
| } | ||
|
|
||
| function getAll() { | ||
| const items = {...localStorage} // spread operator to return all keys | ||
| const list = document.querySelector('ol') | ||
| list.innerHTML = '' | ||
| for(const key in items) { | ||
| const listItem = document.createElement('li') | ||
| const link = document.createElement('a') | ||
| link.onclick = selectContact | ||
| link.setAttribute('href', '#') | ||
| link.setAttribute('id', key) | ||
| link.innerHTML = JSON.parse(items[key]).name | ||
| listItem.appendChild(link) | ||
| list.appendChild(listItem) | ||
| } | ||
| clearForm() | ||
| } | ||
|
|
||
| function getHash() { | ||
| const hashLen = 36 | ||
| const keyLen = 8 | ||
| const offset = 2 | ||
| return Math.random().toString(hashLen).substr(offset, keyLen) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
|
|
||
| body { | ||
| font-family: verdana; | ||
| } | ||
|
|
||
| table { | ||
| margin: 20px; | ||
| border-spacing: 0; | ||
| } | ||
|
|
||
| td { | ||
| border: 1px solid grey; | ||
| margin: 0; | ||
| padding: 5px; | ||
| } | ||
|
|
||
| header { | ||
| height: 120px; | ||
| background-color: #999; | ||
| } | ||
|
|
||
| h1, h2 { | ||
| padding: 20px; | ||
| } | ||
|
|
||
| h2 { | ||
| font-size: 1.2em | ||
| } | ||
|
|
||
| /* button#delete { | ||
| visibility: hidden; | ||
| } */ | ||
|
|
||
| .hidden { | ||
| visibility: hidden; | ||
| } | ||
|
|
||
| form { | ||
| background-color: #666; | ||
| padding: 20px; | ||
| padding-left: 220px; | ||
| } | ||
|
|
||
| main { | ||
| width: 800px; | ||
| background-color: yellow; | ||
| margin: auto; | ||
| } | ||
|
|
||
| nav { | ||
| width: 200px; | ||
| background-color: grey; | ||
| float: left; | ||
| } | ||
|
|
||
| article { | ||
| background-color: #ccc; | ||
| } |