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.

Browser to remember Camera selection, without the browser setting but through a cookie set

I am developing a website, for the employees, they must take a picture of themselves. How can you avoid browser from keep asking whether to allow to access to camera:

Even if you change the browser setting, to allow access camera, it still asking. (Edge). However, for Chrome, the camera option in setting is grayed out.

Every time the page is refreshed, it always ask.

How about a cookie to remember this action? Or any other method?

Please help

Do we still need a Remember Me button on websites? Or can we rely on modern browsers to handle this?

I recently had a discussion at work about whether to include a “Remember Me” option on our website. Altough I was initially in favour of the idea, I later realised that most browsers already provide such functionality. So I was wondering if it’s still necessary to include this option in 2018. What do you think?