Skip to content

Instantly share code, notes, and snippets.

@davidwesst
Last active December 25, 2015 13:18
Show Gist options
  • Save davidwesst/6982284 to your computer and use it in GitHub Desktop.
Save davidwesst/6982284 to your computer and use it in GitHub Desktop.
An example of HTML5 web storage.
<!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