Javascript - Speichern Zustand radio-buttons in localStorage

Folgendes "Problem".

In einem Script sollen praktisch 2 Zustände gespeichert und nach Belieben aufgerufen und dann entsprechend verändert werden.
Das Dokument besteht aus HTML/Javascript und enthält einige Radio-Buttons.
Lädt der Benutzer das Dokument, wird der normale Standard geladen. Das heißt, die Radio-Buttons haben nun eine Vorgabe.
Möchte der Benutzer nun Einstellungen verändern (Klick auf einen Radio-Button), kann er diese Einstellungen in einem Profil speichern und auch wieder laden.
Das funktioniert mit allen Dingen, wie <Input type="text" ....> usw. alles ohne Probleme.

Bei den radio-Buttons habe ich noch so meine Probleme.

Ich würde es gerne so handhaben, dass wenn der Benutzer das Dokument lädt, gleichzeitig im localStorage alle radio-Buttons Zustände gespeichert werden.
Das klappt auch. Geht nun der Benutzer hin und verändert einen radio-Button und klickt anschließend unter "Profil speichern", sollen die neuen Einstellungen ebenso gespeichert werden. Das klappt auch.

Klickt aber der Benutzer anschließend auf "laden Profil", sollen alle Einstellungen genauso wieder geladen werden UND alle radio-Buttons entsprechend geklickt werden. Genau das macht es aktuell nicht.
Kann mir hier jemand einen Tipp geben, mir auf die Sprünge helfen?

Hier ein Ausschnitt des Scripts:

Hier wird als Standard beim Aufruf der Seite die Standardeinstellungen gespeichert

$( document ).ready(function() {
	
	$('input[type="radio"]').each(function() {  
localStorage.setItem('standard_radio_' + $(this).attr('name'), JSON.stringify({checked: this.checked}) );  
});  

....
....

Hier wird bei Wunsch das Profil gespeichert

$('#button_save_profil1').on('click', function(){  

$('input[type="radio"]').each(function() {  
localStorage.setItem('profil1_radio_' + $(this).attr('name'), JSON.stringify({checked: this.checked}) );  
});  
....
....

Hier soll auf Wunsch das gespeicherte Profil geladen werden und alle Änderungen, im Vergleich zum Standard, damit abgearbeitet werden, dass die veränderten Buttons geklickt werden.

$('#button_load_profil1').on('click', function(){  

$('input[type=radio]').each(function()  
{
if ((localStorage.getItem('profil1_radio_'  + $(this).attr('name'))) != (localStorage.getItem('standard_radio_'  + $(this).attr('name'))))  
{

????????????????????

});

Das ist nur eine Code-Idee von meiner Seite. Wenn jemand eine bessere, einfachere Idee hat, gerne. Nur das Endergebnis muss stimmen.
Ich habe den Code schon auf >attr('name')<, anstatt auf >attr('id')< geändert, weil er leider beim speichern dann immer beide IDs speichert. Und er soll ja nur den Zustand des ...>type="radio" wahren "checked" Zustand speichern.

Vielen Dank im Voraus.

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 330900

Url: https://administrator.de/contentid/330900

Ausgedruckt am: 25.11.2024 um 09:11 Uhr

3 Kommentare

Neuester Kommentar

<!doctype html>
<html>
<head>
<meta charset="utf-8">  
<title>Test</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
<script type="text/javascript">  
$(document).ready(function(e) {
    $('#btnSave').click(function(e) {  
        localStorage.clear();
        $('input[type="radio"]:checked').each(function(index, element) {  
            localStorage.setItem($(this).attr('name'),$(this).val());  
        });
    });
	$('#btnLoad').click(function(e) {  
        $('input[type="radio"]').each(function(index, element) {  
			if ($(this).val() == localStorage.getItem($(this).attr('name'))){  
				$(this).prop('checked',true);  
			}
        });
    });
});
</script>
<body>
<input name="TestGroup" type="radio" value="wert1">Wert1<br/>  
<input name="TestGroup" type="radio" value="wert2">Wert2<br/>  
<input name="TestGroup" type="radio" value="wert3">Wert3<br/>  
<input type="button" id="btnSave" value="Save">  
<input type="button" id="btnLoad" value="Load">  
</body>
</html>

Gruß

Vielen Dank @132272,
etwas anders als mein Script, aber funktioniert soweit (genauso). Mein eigentliches "Problem" besteht hauptsächlich darin, dass die "checked" Buttons auch jeweils geklickt werden, sollten sie den Flag "checked" haben. Denn leider ist bei manchen dieser Radio-Buttons auch noch ein Script (Function) hinterlegt.

Der derzeitige Stand sieht nun so aus:

$('input[type="radio"]:checked').each(function(index, element) {  
localStorage.setItem('standard_radio_' + $(this).attr('name'),$(this).val());});  

//speichern
$('#button_save_profil1').click(function(e) {  
Object.keys(localStorage)
.forEach(function(key){if (/^(profil1_radio_)/.test(key)) {localStorage.removeItem(key);}});  
$('input[type="radio"]:checked').each(function(index, element) {  
localStorage.setItem('profil1_radio_' + $(this).attr('name'),$(this).val());});});  
$('#button_save_profil2').click(function(e) {  
Object.keys(localStorage)
.forEach(function(key){if (/^(profil2_radio_)/.test(key)) {localStorage.removeItem(key);}});  
$('input[type="radio"]:checked').each(function(index, element) {  
localStorage.setItem('profil2_radio_' + $(this).attr('name'),$(this).val());});});  

//laden
$('#button_load_profil1').click(function(e) {  
$('input[type="radio"]').each(function(index, element) {  
if ($(this).val() == localStorage.getItem('profil1_radio_' + $(this).attr('name'))){  
$(this).prop('checked',true);  
if ((localStorage.getItem('profil1_radio_'  + $(this).attr('name'))) != (localStorage.getItem('standard_radio_'  + $(this).attr('name'))))   
{console.log("gechecked");$(this).click();}}});});  
$('#button_load_profil2').click(function(e) {  
$('input[type="radio"]').each(function(index, element) {  
if ($(this).val() == localStorage.getItem('profil2_radio_' + $(this).attr('name'))){  
$(this).prop('checked',true);  
if ((localStorage.getItem('profil2_radio_'  + $(this).attr('name'))) != (localStorage.getItem('standard_radio_'  + $(this).attr('name'))))   
{console.log("gechecked");$(this).click();}}});});  