How do I save radio button data to local storage and when you come back it loads it to the state that it was in when you left?

Question

0.00/5 (No votes)

See more:

Firstly here is the code link https://jsfiddle.net/jmd2f8xb/

Okay so the goal is for the JS to save the Radio Button Data To Local Storage and run the function "load" which loads the data back to the state it was saved in.

One of the things I need though is the html code that is there to still function even when JS is not enabled because all the JS needs to do is save and load.
I don't have enough skill to come up with the JS. Especially considering this is the only JS on the entire site so I was hoping someone could help me.

I did think of a way it could be done, I dont know how efficient and how good they are or how compatable they are with older browsers.
Add onclick to the html buttons which run a function that save the information.

What I have tried:

https://codepen.io/rajarajan/pen/XWVPRpX Only issue is it does not have a load function/someway to load it and I dont know how it could be implemented to function like my current method.

I tried modifying the above codepen into my code and changing stuff around and trying to make it duplicate the HTML and put it where it is meant to be and a bunch of other stuff I spent around 3 hours and now I am here. And the way that codepen was setup it replaced my HTML code which meant you could only switch colors with JS compared to how it is meant to be which is switch colors with CSS and only be able to save and load with JS

Posted 13-Apr-22 17:24pm

Member 15601574

Updated 13-Apr-22 17:55pm

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Graeme_Grant · Answer 1 · 2022-04-13T17:55:00

Solution 1

Your jsfiddle had no javascript.

For load/save to local storage, This google search gives plenty of examples: javascript save load data to local storage[^] - this is a good link: localStorage in JavaScript: A complete guide - LogRocket Blog[^]

As for loading from storage when the page loads, you need to use: Window: load event - Web APIs | MDN</a>[^]

Posted 13-Apr-22 17:55pm

Graeme_Grant

Updated 13-Apr-22 17:56pm

v2

Comments

Member 15601574 14-Apr-22 13:46pm

I did not provide the JS because I never got it to work as intended.

Graeme_Grant 14-Apr-22 17:40pm

Everything that you need is provided in the links posted above...