JSFiddle - React, Tailwind, and code Playground
HTML
<!-- Fields to store a key/value pair (item) in sessionStorage -->
<section>
<label for="key">Key:</label>
<input type="text" id="key" value="c3po">
<br>
<label for="value">Value:</label>
<input type="text" id="value" value="R2-D2">
<br>
<button type="button" id="set-local">Save to sessionStorage</button>
</section>
<hr>
<!-- Fields to get a key/value pair (item) from sessionStorage -->
<section>
<label for="get-key">Key:</label>
<input type="text" id="get-key" value="c3po">
<button type="button" id="get-local">Get from sessionStorage</button>
<output id="output"></output>
</section>
<hr>
<!-- Button to clear the sessionStorage for this Domain -->
<section>
<button type="button" id="clear">Clear sessionStorage</button>
</section>
JavaScript
/* global document, window */
var valueSetHandler = function () {
/** read the values from the form */
var key = document.getElementById('key').value,
value = document.getElementById('value').value;
/** save value under key in localStorage */
window.sessionStorage.setItem(key, value);
},
valueGetHandler = function () {
/** read the value from the form */
var key = document.getElementById('get-key').value,
/** read the value from the localStorage */
value = window.sessionStorage.getItem(key);
/** write the value in output */
document.getElementById('output').innerText = value;
},
clearStorageHandler = function () {
window.sessionStorage.clear();
};
/** register event Listeners for button clicks */
document.getElementById('set-local').addEventListener('click', valueSetHandler);
document.getElementById('get-local').addEventListener('click', valueGetHandler);
document.getElementById('clear').addEventListener('click', clearStorageHandler);