Search code examples
javascripthtmldatabasebuttonweb-testing

Save integer to local storage html & javascript

I am trying to make a website that generates a random starcode from an array (https://en.help.roblox.com/hc/en-us/articles/360026181292-Roblox-Star-Code) and It is working. But I want to add a settings feature where you can change the background color, which also works. But I want to save the background color so next time they go to the website the background color will still be there. Code:

<!DOCTYPE html>
<html>
<head>
    <title>Starcode Selector</title>
    <style>
        body {
            background-color: #999999; /* Default background color */
        }
    </style>
    <style>
  #Starcodeselector {
    margin-left: 850px;
  }
    #Generate {
    margin-left: 925px;
    }
    #code {
    margin-left: 820px
    }
</style>
</head>
<body>
    <button id="settingsbutton" onclick="changeBackgroundColor()">
    <img src="https://th.bing.com/th/id/OIP.bYjHRWzPofO43ZMBzzdVngHaHM?pid=ImgDet&rs=1" alt="settings" width="75" height="75">
    </button>
    <h1 id="Starcodeselector">Starcodeselector</h1>
    <button onclick="generateCode()" id="Generate">Generate</button>
    <div id="code"></div>

    <script>
        const starcodes = ["DV", "NOODLES", "OLIX", "LCLC", "LAUGH", "SCRIPTED", "REALKREEK"];
        const colors = ["blue","green","red","pink","purple","black","yellow","#999999"];

        let selectedColor = 0;

        function changeBackgroundColor() {
            document.body.style.backgroundColor = colors[selectedColor];
            selectedColor = (selectedColor + 1) % colors.length;
        }

        function generateCode() {
            const number = Math.floor(Math.random() * starcodes.length);
            const code = "Use Starcode " + starcodes[number] + " when buying robux!";
            document.getElementById('code').innerText = code;
            console.log("color=" + selectedColor)
        }

    </script>
</body>
</html>

I have tried using cookies and local storage but the website breaks and no buttons work.

Solution

  • Try this in a browser:

    const starcodes = ["DV", "NOODLES", "OLIX", "LCLC", "LAUGH", "SCRIPTED", "REALKREEK"];
const colors = ["blue","green","red","pink","purple","black","yellow","#999999"];

let selectedColor = 0;

function changeBackgroundColor() {
  localStorage.setItem('selectedColorIndex', selectedColor);
  document.body.style.backgroundColor = colors[selectedColor];
  selectedColor = (selectedColor + 1) % colors.length;
}

function generateCode() {
  const number = Math.floor(Math.random() * starcodes.length);
  const code = "Use Starcode " + starcodes[number] + " when buying robux!";
  document.getElementById('code').innerText = code;
  console.log("color=" + selectedColor)
}

function restoreBackgroundColorFromLocalStorage() {
  const lsColorIndex = localStorage.getItem('selectedColorIndex');

  if (lsColorIndex !== null) {
    selectedColor = Number(lsColorIndex);
    changeBackgroundColor();
  }
}

   
restoreBackgroundColorFromLocalStorage();
    body {
  background-color: #999999; /* Default background color */
}
    <button id="settingsbutton" onclick="changeBackgroundColor()">
<img src="https://th.bing.com/th/id/OIP.bYjHRWzPofO43ZMBzzdVngHaHM?pid=ImgDet&rs=1" alt="settings" width="75" height="75">
</button>
<h1 id="Starcodeselector">Starcodeselector</h1>
<button onclick="generateCode()" id="Generate">Generate</button>
<div id="code"></div>