internet2107
Mar 02, 2017, updated at 08:41:29 (UTC)
view4200
view3
0
Goto Top

Javascript - Speichern Zustand radio-buttons in localStorage

GermansolvedQuestionJavaScriptDevelopment
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.
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 330900

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

Printed on: April 16, 2024 at 09:04 o'clock

3 Comments
Latest comment
Goto Top
Mitglied: 132272
132272 Mar 02, 2017 updated at 12:19:32 (UTC)
Goto Top
<!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ß
heart1
Member: internet2107
internet2107 Mar 03, 2017 updated at 05:57:27 (UTC)
Goto Top
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();}}});});
Mitglied: 132272
132272 Mar 03, 2017 at 06:35:02 (UTC)
Goto Top
s.o. filtere nur die gecheckten und auf die wendest du den Klick an, du machst das ja auf alle.
GermansolvedQuestionJavaScriptDevelopment