JSFiddle - React, Tailwind, and code Playground

HTML

<form>
key1<input type="text" class="key" id="key1"/>
value1<input type="text" class="val"  id="value1"/>
key2<input type="text" class="key"  id="key2"/>
value2<input type="text" class="val" id="value2"/>
</br>
</br>
<a href="#" onclick="pushArray()">push</a>
<a href="#" onclick="showStuff()">pull</a>
</form>
<p id="stuff">

</p>

JavaScript

var datas = new Array;
if (navigator.appName !== 'Microsoft Internet Explorer'){
    var qsVal = document.getElementsByClassName("val");
}
else{
    var qsVal = document.querySelectorAll('.val');
}
if (navigator.appName !== 'Microsoft Internet Explorer'){
    var qsKey = document.getElementsByClassName("key");
}
else{
    var qsKey = document.querySelectorAll('.key');
}
var storedPlays;
var stuff = document.getElementById("stuff");

function pushArray(){
    for (var i=0, len = qsVal.length; i < len; i++){
    thisValue = qsVal[i].value;
    thisKey = qsKey[i].value;
    datas.push([thisValue,thisKey]);
    localStorage.setItem('datas', JSON.stringify(datas));
    }
}

function showStuff(){
    storedPlays    = JSON.parse(localStorage.getItem('datas'));
    document.getElementById("stuff").innerHTML = storedPlays;
}