vanilla JS: storing different functions as different values of one key in localStorage
by maksymkushnirov
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.size {
width: 100px;
height: 100px;
}
.hiddenimage {
display: none;
}
.activeimage {
background-color: orange;
}
.text1color {
color: green;
}
.text2color {
color: red;
}
.text3color {
color: blue;
}
.text4color {
color: purple;
}
.text5color {
color: brown;
}
</style>
</head>
<body>
<div>
<img
class="image1isvisible size"
id="idimage1isvisible"
onclick="switchToImage2()"
src="https://upload.wikimedia.org/wikipedia/commons/a/a8/Eo_circle_green_white_number-1.svg"
/>
<img
class="image2isvisible size"
id="idimage2isvisible"
onclick="switchToImage3()"
src="https://upload.wikimedia.org/wikipedia/commons/8/85/Eo_circle_red_white_number-2.svg"
/>
<img
class="image3isvisible size"
id="idimage3isvisible"
onclick="switchToImage4()"
src="https://upload.wikimedia.org/wikipedia/commons/1/1a/Eo_circle_blue_white_number-3.svg"
/>
<img
class="image4isvisible size"
id="idimage4isvisible"
onclick="switchToImage5()"
src="https://upload.wikimedia.org/wikipedia/commons/7/79/Eo_circle_purple_white_number-4.svg"
/>
<img
class="image5isvisible size"
id="idimage5isvisible"
onclick="switchToImage1()"
src="https://upload.wikimedia.org/wikipedia/commons/2/28/Eo_circle_brown_white_number-5.svg"
/>
</div>
<p class="text">
If the localStorage is clear (on the first load), the state is like now:
all five images are shown, all five...