JSFiddle - React, Tailwind, and code Playground

by RXBeat

HTML

<textarea class="content-input" style="width: 100%; height:8vh; padding: 10px;" name="text" id="text" wrap="soft" placeholder="Testfeld 1"></textarea>

    <textarea class="content-input" style="width: 100%; height:8vh; padding: 10px;" name="text" id="text" wrap="soft" placeholder="Testfeld 2"></textarea>
    
    <textarea class="content-input" style="width: 100%; height:8vh; padding: 10px;" name="text" id="text" wrap="soft" placeholder="Testfeld 3"></textarea>
    
    <textarea class="content-input" style="width: 100%; height:8vh; padding: 10px;" name="text" id="text" wrap="soft" placeholder="Testfeld 4"></textarea>
    
    <textarea class="content-input" style="width: 100%; height:8vh; padding: 10px;" name="text" id="text" wrap="soft" placeholder="Testfeld 5"></textarea>

<br>
<br>

    <button class="savecache-button" id="save"> Cache-Save </button>


    


    <div style="width: 68%; margin:20px;">
        <p style="font-size:0.7em;">Hier steht was im cache ist:</p>
        <div class="content-output" style="font-size: 0.4em;"></div>
    </div>

JavaScript

/* TEXTAREA IN CACHE */

        var input_textarea = document.querySelector('.content-input');
        var output_div = document.querySelector('.content-output');
        var save_button = document.querySelector('.savecache-button');

        save_button.addEventListener('click', updateOutput);

        output_div.textContent = localStorage.getItem('content');
        input_textarea.value = localStorage.getItem('content');

        function updateOutput() {
            localStorage.setItem('content', input_textarea.value);

            output_div.textContent = input_textarea.value;
        }