feat: Persist checkbox states in localStorage to retain settings after page reload

- Implemented logic to save the visibility states of POI and map layers in localStorage.
- Loaded saved checkbox states on component mount to retain user preferences.
- Updated `handleCheckboxChange` and `handlePoiCheckboxChange` to store changes in localStorage.
- Ensured that settings persist across page reloads for a better user experience.

components/DataSheet.js

@@ -18,6 +18,18 @@ function DataSheet() {
   const GisSystemStatic = useRecoilValue(gisSystemStaticState);
   const setZoomTrigger = useSetRecoilState(zoomTriggerState);
 
+  useEffect(() => {
+    const storedPoiVisible = localStorage.getItem("poiVisible");
+    if (storedPoiVisible !== null) {
+      setPoiVisible(storedPoiVisible === "true");
+    }
+
+    const storedMapLayersVisibility = localStorage.getItem("mapLayersVisibility");
+    if (storedMapLayersVisibility) {
+      setMapLayersVisibility(JSON.parse(storedMapLayersVisibility));
+    }
+  }, [setPoiVisible, setMapLayersVisibility]);
+
   const handleAreaChange = (event) => {
     const selectedIndex = event.target.options.selectedIndex;
     const areaName = event.target.options[selectedIndex].text;
@@ -69,10 +81,17 @@ function DataSheet() {
         ...prev,
         [name]: checked,
       };
+      localStorage.setItem("mapLayersVisibility", JSON.stringify(newState)); // Store in localStorage
       return newState;
     });
   };
 
+  const handlePoiCheckboxChange = (event) => {
+    const { checked } = event.target;
+    setPoiVisible(checked);
+    localStorage.setItem("poiVisible", checked); // Store POI visibility in localStorage
+  };
+
   const handleIconClick = () => {
     setSelectedArea("Station wählen");
     setZoomTrigger((current) => current + 1);
@@ -104,15 +123,7 @@ function DataSheet() {
               <br />
             </React.Fragment>
           ))}
-          <input
-            type="checkbox"
-            checked={poiVisible}
-            onChange={(e) => {
-              const checked = e.target.checked;
-              setPoiVisible(checked);
-            }}
-            id="poi-checkbox"
-          />
+          <input type="checkbox" checked={poiVisible} onChange={handlePoiCheckboxChange} id="poi-checkbox" />
           <label htmlFor="poi-checkbox" className="text-sm ml-2">
             POIs
           </label>