JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" value="chB1" /> Checkbox 1<br />
<input type="checkbox" value="chB2" /> Checkbox 2<br />
<input type="checkbox" value="chB3" /> Checkbox 3<br />
<input type="checkbox" value="chB4" /> Checkbox 4<br />
<input type="checkbox" value="chB5" /> Checkbox 5<br /> 

<button onclick="save()">SAVE</button>

<button onclick="load_()">LOAD</button>


<div id="chB1">1. Ich bin sichtbar!</div> 
<div id="chB2">2. Ich bin sichtbar!</div> 
<div id="chB3">3. Ich bin sichtbar!</div> 
<div id="chB4">4. Ich bin sichtbar!</div> 
<div id="chB5">5. Ich bin sichtbar!</div>

JavaScript

var i, checkboxes = document.querySelectorAll('input[type=checkbox]');  

    function save() {  
      for (i = 0; i < checkboxes.length; i++) { 
        // mit json kodiert, damit der typ nicht von boolean zu string geändert wird  
        localStorage.setItem(checkboxes[i].value, JSON.stringify( checkboxes[i].checked ));   
      }  
    }  

    function load_() {  
      for (i = 0; i < checkboxes.length; i++) {  
         
        // Wert wieder auslesen und zurück dekodieren 
        var isChecked = JSON.parse( localStorage.getItem(checkboxes[i].value) ); 
        checkboxes[i].checked = isChecked;  
         
        // sichtbarkeit abhängig vom checked-Status setzen 
        var showState = isChecked ? 'block' : 'none';  
        document.getElementById(checkboxes[i].value).style.display = showState; 
         
      }  
    }