title: How to permanently change color on button click
body: <p>I have a function that changes the color of a box on button click and it works fine. My question is when I reload the page the CSS will revert back to the original box color. Is there a way to make the changed box color permanent. Even when the page is reloaded the changed color will not revert back.Can't use local storage and cookies because those are not shared between devices.Something like changing the whole codebase when the function <code>changeColor</code> runs. Is this possible. Any help is appreciated. Thanks in advance.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function changeColor() {
    document.getElementById("box1").style.backgroundColor = "green";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#box1 {
    width: 150px;
    height: 150px;
    background-color: red;
    position: absolute;
    top: 0px;
    left: 0px;
  }
  
  .button1 {
    position: absolute;
    top: 10px;
    left: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="box1"&gt;&lt;/div&gt;
  &lt;button class="button1" onclick="changeColor()"&gt;Change color&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>