Drag and Drop with Localstorage

I'm trying to make an html with a drag and drop. On the one hand I have in a div a series of divs with names of foods, and on the other hand some divs that act as containers for the drag and drop.

<!-- Elementos arrastrables -->
<div>

    <div id="caja1" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)"> 
    <span>Manzana</span>
    </div>

     <div id="caja2" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)"> 
     <span>Pera</span>
    </div>

    <div id="caja3" draggable="true" ondragstart="dragstart(this, event)" ondrag="drag(this, event)" ondragend="dragend(this, event)"> 
    <span>Platano</span>
    </div>
</div>
<!-- Contenedores-->
<div >
    <div class="container" id="drag_and_drop1" ondrop="drop(this, event)" ondragenter="dragenter(this, event)" ondragover="dragover(event)" ondragleave="dragleave(this, event)">Verdura
    </div>

    <div class="container" id="drag_and_drop2" ondrop="drop(this, event)" ondragenter="dragenter(this, event)" ondragover="dragover(event)" ondragleave="dragleave(this, event)">Fruta
    </div>
</div>

At the time of adding the food to the container I add them as follows:

function drop(target, event) {
// obtenemos los datos
var caja = event.dataTransfer.getData('Data');
document.getElementsByClassName("container").className = "outContainer";
// agregamos el elemento de arrastre al contenedor
target.appendChild(document.getElementById(caja));
}

My question is ... I want to make a button that saves me the current situation of the page, with the food that has not been touched, in its initial position and with which I have moved to the corresponding container. All this with localstorage, but I'm not able to, by reloading the page, keep everything.

Any help? I'm new to JavaScript and it's surpassing me