Member Avatar for gentlemedia

I have the following which works fine for text inputs, textareas and selects with the class 'stored'. 

$(function() {

    $.each($('.stored'), function() {
        if(localStorage[$(this).attr('name')]) {
            $(this).val(localStorage[$(this).attr('name')]);
        }
    });

    $('.stored').on('change', function() {
        localStorage[$(this).attr('name')] = $(this).val(), $(this).find('option:selected').val();
    });

});

To store radio buttons or checkboxes with the class 'stored' in localStorage I've tried to extend that on change function with several ways such as:

localStorage[$(this).attr('name')] = $(this).val(), $(this).find('option:selected').val(), this.checked.val();

But no can do!

Then I tried to seperate it with the following, but also nothing

if ($('.stored').is(':checked')) {
    localStorage[$(this).attr('name')] = $(this).val();
};

So how to do this exactly? I've created a pen with this all.
http://codepen.io/gentlemedia/pen/ORgQyr/

Thanks!

  • 2 Contributors
  • 2 Replies
  • 1K Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

you were almost there. Using the radio group’s name as the storage key is correct; the issue is restoration. Calling .val() on a radio changes its value attribute, not which one is checked. You want to store the selected radio’s value, then re-check the radio whose [value] matches that string. For checkboxes, persist a key per box (prefer id; if boxes share the same name, combine name + "::" + value to avoid collisions). Nice nudge from @diafol; here’s a compact, predictable pattern.

Save on change:

$(document).on('change', '.stored', function () {
  var $el = $(this), t = $el.attr('type'), name = $el.attr('name');
  if (t === 'radio') {
    localStorage.setItem(name, $el.val());
  } else if (t === 'checkbox') {
    var key = $el.attr('id') || (name + '::' + $el.val());
    localStorage.setItem(key, $el.prop('checked') ? '1' : '0');
  } else {
    localStorage.setItem(name, $el.val());
  }
});

Restore on load:

$('.stored').each(function () {
  var $el = $(this), t = $el.attr('type'), name = $el.attr('name');
  if (t === 'radio') {
    var v = localStorage.getItem(name);
    if (v != null) $('input[name="' + name + '"][value="' + v + '"]').prop('checked', true);
  } else if (t === 'checkbox') {
    var key = $el.attr('id') || (name + '::' + $el.val());
    var s = localStorage.getItem(key);
    if (s != null) $el.prop('checked', s === '1');
  } else {
    var v2 = localStorage.getItem(name);
    if (v2 != null) $el.val(v2);
  }
});

Notes:

  • this.checked is a boolean; do not call .val() on it.
  • You do not need find('option:selected'); .val() on a <select> already returns the selected option.
  • Consider clearing keys on successful submit, and wrap localStorage.* in try/catch if you expect private mode or quota issues.

Recommended Answers

All 2 Replies

Member Avatar for gentlemedia

Thanks, Diafol! I know I go wrong with using name, because the radio buttons do have of course the same name, but I couldn't figure out what to use instead for the them. Your solution works well for me too, because I've tried long enough :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.