Created
June 15, 2020 21:34
-
-
Save transiient/e54bec48c1639bc2ebd5162e7e1844af to your computer and use it in GitHub Desktop.
A super-basic localStorage API 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
| <!-- | |
| Blogpost available at medium.com/@samcrossdigital | |
| --> | |
| <html> | |
| <head> | |
| <title>localStorage</title> | |
| </head> | |
| <body> | |
| <p>Store</p> | |
| <input type="text" name="textinput" id="input-field" /> | |
| <button id="btn-store">Store Value</button> | |
| <span>Just stored: </span><span id="text-store"></span> | |
| <p>Retrieve</p> | |
| <button id="btn-get">Get Value</button> | |
| <span>Just got: </span><span id="text-get"></span> | |
| <p>Clear</p> | |
| <button id="btn-clear">Clear Value</button> | |
| <script> | |
| (function () { | |
| const btnStore = document.getElementById('btn-store'); | |
| const btnGet = document.getElementById('btn-get'); | |
| const btnClear = document.getElementById('btn-clear'); | |
| const inputField = document.getElementById('input-field'); | |
| const textStore = document.getElementById('text-store'); | |
| const textGet = document.getElementById('text-get'); | |
| btnStore.addEventListener('click', (e) => { | |
| localStorage.setItem('item0', inputField.value); | |
| textStore.innerText = inputField.value; | |
| }); | |
| btnGet.addEventListener('click', (e) => { | |
| textGet.innerText = localStorage.getItem('item0'); | |
| }); | |
| btnClear.addEventListener('click', (e) => { | |
| localStorage.clear(); | |
| }); | |
| })() | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment