Last active
December 25, 2015 13:18
-
-
Save davidwesst/6982284 to your computer and use it in GitHub Desktop.
An example of HTML5 web storage.
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
| <!DOCTYPE html> | |
| <html> | |
| <body> | |
| <section> | |
| <input id="theData" type="text" placeholder="Enter some text to save" /> | |
| </section> | |
| <section> | |
| <h1>Local Storage</h1> | |
| <article> | |
| <label for="localValue">Local Storage: </label> | |
| <input id="localValue" type="text" /> | |
| </article> | |
| </section> | |
| <section> | |
| <h1>Session Storage</h1> | |
| <article> | |
| <label for="sessionValue">Session Storage: </label> | |
| <input id="sessionValue" type="text" /> | |
| </article> | |
| </section> | |
| <section> | |
| <input type="button" onclick="saveLocal();" value="Save to Local Storage" /> | |
| <input type="button" onclick="saveSession();" value="Save to Session Storage" /> | |
| <input type="button" onclick="loadLocal();" value="Load Local Storage" /> | |
| <input type="button" onclick="loadSession();" value="Load Session Storage" /> | |
| <input type="button" onclick="clearLocal();" value="Clear Local Storage" /> | |
| <input type="button" onclick="clearSession();" value="Clear Session Storage" /> | |
| </section> | |
| <script type="text/javascript"> | |
| var key = "MyKey"; | |
| var localDisplay = document.getElementById("localValue"); | |
| var sessionDisplay = document.getElementById("sessionValue"); | |
| function loadLocal() { | |
| localDisplay.value = localStorage.getItem(key); | |
| } | |
| function saveLocal() { | |
| var data = document.getElementById("theData").value; | |
| localStorage.setItem(key, data); | |
| } | |
| function clearLocal() { | |
| localStorage.clear(); | |
| } | |
| function loadSession() { | |
| sessionDisplay.value = sessionStorage.getItem(key); | |
| } | |
| function saveSession() { | |
| var data = document.getElementById("theData").value; | |
| sessionStorage.setItem(key, data) | |
| } | |
| function clearSession() { | |
| sessionStorage.getItem(key); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment