I need assistance creating a proper localstorage to correctly remember fairly complex toggle state

I have a multilevel toggle code that I need to have remembered when a user refreshes the page. I have read others here but unfortunately they are all single level toggles and they do not help me. The toggle works perfect without any of my localstorage code added. However, when I add the localstorage code the original code goes haywire. Can anyone guide me to the correct way to set up my localstorage? https://jsfiddle.net/gu73x16s/

I have tried several methods and I am unable to get any to work. I will attach a jsfiddle.

enter code here <form method="post" autocomplete="on">   <fieldset>     <div>   <p><label class="yes_text">Yes</label><span><input type="radio"      id="dog" name="answer_name" value="yes"></span></p>   <p><label>No</label><span><input type="radio"  name="answer_name"                         checked="checked"></span></p> </div> </fieldset> <fieldset class="include_other_levels"> <div class="red">   <div>     <p>Include Red Dogs&#58;</p>   </div>   <div>     <p><label class="yes_text_include">select to include</label><span>                                                           <input type="checkbox" id="cat" class="red" name="red_name" value=""></span></p>   </div> </div> <div class="green">   <div>     <p>Include Green Dogs&#58;</p>   </div>   <div>     <p><label>select to include</label><span><input type="checkbox"                              name="green_name" value=""></span></p>    </div>  </div> </fieldset> </form>  $  (document).ready(function() {  $  (this).find('input[type=radio]').change(function() { $  (this).closest('form').find('label'); if (this.value == "yes") {   $  (this).closest('form').find(".include_other_levels").toggle(200);   localStorage.setItem("toggleState", "d"); } else {   $  (this).closest('form').find(".include_other_levels").toggle(200);   $  ("div.green").hide();   localStorage.setItem("toggleState", "g"); } }); var state = localStorage.getItem("toggleState"); if (state == "d") { $  (".yes_text").addClass("toggle"); $  ("#dog").prop("checked", true); $  (".include_other_levels").show() } else { $  (".yes_text").addClass("goggle"); $  ("#dog").prop("checked", false); }  $  ('input[type="checkbox"]').click(function() {  if ($  ("input.red:checkbox").is(':checked')) {   $  ('div.green').show(300); } else {   $  ('div.green').hide(300); } });  });    fieldset.include_other_levels {  display: none;  clear: both;   transition: visibility 0s 2s, opacity 2s linear; } 

The code has an initial radio button. If user selects “yes” they get a dropdown checkbox. If the user checks that checkbox another checkbox dropsdown. Each state needs to have storage so the user can return after a page refresh and the same state appears.

Should a toggle button show its current state or the state to which it will change?

I have a quick question about buttons that toggle between two states. (Think Play/Pause, or Shuffle/Regular Play.) As the title says, should the toggle show it’s current state or the state to which it will transition?

I think people are used to the Play/Pause convention. But the Shuffle/Regular play might be more confusing if you show the transition state instead of current. For example, the built-in music player on the Xbox 360 does it this way: when it’s in shuffle mode, it shows the icon for direct play and vice versa and it always confuses me (am I in shuffle mode or straight play).

It sees it this way. Play/Pause is more like action as in begin playing or pause playing. Yes behind the scenes it is a state transition but to the user, there is an action. Whereas Shuffle/Straight Play is an option and it’s best to show the current state (and possibly have only one icon and change button to show that the option is enabled/disabled). Thoughts?

Avoid toggle switch on any page with save button?

I’m currently working on a tool which more or less requires a submit/save button on every page. This is due to avoid any immediate effect on the end user who consumes the content.

Sometimes, it feels natural for me to throw in a toggle switch as a way to activate or disable a feature.

For example, if I have an image that has already been uploaded and is serving users, I then decide to update it with a watermark. In the image editor interface, should this be a toggle switch or a checkbox?

The answer would be a checkbox according to the guidelines found on Nielsen Norman (and also other sources). This is because toggle switches should never be used unless the effect is immediate, like turning on/off airplane mode on your phone. It also states that a checkbox should be used if it requires a submit button.

With that said, does this simply mean I should never use toggle switches as all of my pages requires a “save” before applying changes? Or could “immediate” also be interpreted for things that update the interface visually, even though it’s not saved? In the case of the example, a watermark being activated and shown (not yet saved).

Please note that I’m not actually working on an image editor, I’m mainly looking for a generic answer that could be applied anywhere.

Toggle button/switch: is there a standard way to indicate the currently selected state [duplicate]

This question already has an answer here:

  • Should a toggle button show its current state or the state to which it will change? 21 answers

We are implementing a toggle to switch between two different ways of showing data in a table. I created a mockup for the toggle but shortly afterward realized that people are very divided in how they interpret toggle buttons. There seem to be two camps:

  1. Toggle as depressed button. The darker side in this case indicates the current selection as it replicates the model of a pushed button or side of a switch. For example: this one this one
    (source: designmap.com)

  2. Toggle as a slider. The lighter side in this case indicates the current selection as it replicates the model of a slider being moved to one side to indicate preference. For example, this one

Obviously, these two methods contradict one another. Currently we are using method 1 but before we get any further along in development I wanted to confirm with a larger audience, which of these do you think is a more universal way of understanding/interpreting a toggle button’s state? Or is this just a nebulous issue and it might be better to avoid toggles for this altogether?

How to toggle automatic macOS logging/debug gathering off and on?

I’m being told that I should have some logs present within my User’s Library/Logs folder that appear to be missing. Specifically when apps hang, Apple apparently captures samples and such diagnostic info for these events. Mine’s been turned off and I’d like to know how to turn this back on, but I’m not finding the proper terminology that Apple apparently calls this to find the right Terminal command to toggle this functionality on and off.

How can I toggle class only for clicked element

I dont know how to toggle class only for clicked element. How can I point out for react that I want to change class only for clicked element. How shall I do it ?

import React, { Component } from "react";  class RecipesList extends Component {   state = {     hasClass: false   };   toggleActive = () => {     this.setState({       hasClass: true     });   };    render() {     const { recipesList } = this.props;     const { hasClass } = this.state;     return (       <ul className="recipiesList">         {recipesList.map(item => (           <li             className={hasClass ? "active" : ""}             key={item.recipe_id}             onClick={this.toggleActive}           >           </li>         ))}       </ul>     );   } }  export default RecipesList;