Created
September 23, 2012 08:08
-
-
Save ynonp/3769308 to your computer and use it in GitHub Desktop.
Local storage example
This file contains hidden or 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
| 1. Write an HTML file that contains a form with 3 fields: name, phone number and email. | |
| 2. Add two buttons: "Save" and "Restore" | |
| 3. When a user clicks "Save", all form data is saved in local storage | |
| 4. When a user clicks "Restore", all form data is filled from local storage | |
| 5. (Bonus) Change the program so that whenever a user types anything in any input field all data is saved, and data is automatically restored on page load. | |
This file contains hidden or 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
| /** | |
| * Created with JetBrains WebStorm. | |
| * User: ynonperek | |
| * Date: 9/23/12 | |
| * Time: 9:42 AM | |
| * To change this template use File | Settings | File Templates. | |
| */ | |
| function visited() { | |
| var visits = Number( localStorage.getItem('visits') ); | |
| if ( visits != null ) { | |
| visits += 1; | |
| } else { | |
| visits = 0; | |
| } | |
| localStorage.setItem('visits', visits ); | |
| } | |
| function restoreData() { | |
| return localStorage.getItem('visits'); | |
| } | |
| function clearData() { | |
| localStorage.clear(); | |
| } | |
| visited(); | |
| var visits = restoreData(); | |
| document.querySelector('.visits').innerHTML = visits; | |
| var clear_btn = document.querySelector('#btn-clear'); | |
| clear_btn.addEventListener('click', clearData ); |
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Youve Been Here</title> | |
| </head> | |
| <body> | |
| <p>You've Been Here <span class="visits">0</span> Times</p> | |
| <button id="btn-clear">Clear</button> | |
| <script src="been.js"></script> | |
| <script src="obj.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| /** | |
| * Created with JetBrains WebStorm. | |
| * User: ynonperek | |
| * Date: 9/23/12 | |
| * Time: 9:58 AM | |
| * To change this template use File | Settings | File Templates. | |
| */ | |
| var data = { | |
| visits: 0, | |
| name: 'Ynon', | |
| level: 6 | |
| }; | |
| var data_txt = JSON.stringify(data); | |
| localStorage.setItem('data', data_txt ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment