JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Fields to store a key/value pair (item) in localStorage -->
<section>
    <label for="key">Key:</label>
    <input type="text" id="key" value="r2d2">
    <br>
    <label for="value">Value:</label>
    <input type="text" id="value" value="C-3PO">
    <br>
    <button type="button" id="set-local">Save to localStorage</button>
</section>
<hr>
<!-- Fields to get a key/value pair (item) from localStorage -->
<section>
    <label for="get-key">Key:</label>
    <input type="text" id="get-key" value="r2d2">
    <button type="button" id="get-local">Get from localStorage</button>
    <output id="output"></output>
</section>
<hr>
<!-- Button to clear the localStorage for this Domain -->
<section>
    <button type="button" id="clear">Clear localStorage</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.localStorage.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.localStorage.getItem(key);

    /** write the value in output */
    document.getElementById('output').innerText = value;
},
clearStorageHandler = function () {
    window.localStorage.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);