Code for a browser Performance Cookie

Here's an example of how you can use a performance cookie to store and retrieve data related to website performance:

<script>
  // Check if the performance cookie is set
  var performanceCookie = getCookie("performance");
  if (performanceCookie) {
    // Apply the saved performance settings
    applyPerformanceSettings(performanceCookie);
  }

  function setPerformanceSettings() {
    // Get the user's preferred performance settings
    var performanceSettings = getPerformanceSettings();

    // Save the performance settings to a cookie
    setCookie("performance", performanceSettings, 365);

    // Apply the performance settings
    applyPerformanceSettings(performanceSettings);

    alert("Performance settings saved.");
  }

  function getPerformanceSettings() {
    // Get the user's preferred performance settings, such as image quality or animation speed
    // You can use JavaScript to detect the user's device or connection speed to determine appropriate settings
    // For simplicity, we'll use a basic form with checkboxes
    var imageQuality = document.querySelector('input[name="image-quality"]:checked').value;
    var animationSpeed = document.querySelector('input[name="animation-speed"]:checked').value;
    
    return imageQuality + "|" + animationSpeed;
  }

  function applyPerformanceSettings(performanceSettings) {
    // Apply the performance settings to the website, such as by adjusting image quality or animation speed
    var settings = performanceSettings.split("|");
    var imageQuality = settings[0];
    var animationSpeed = settings[1];

    // Apply the performance settings to the website elements, for example:
    // document.querySelector("img").style.quality = imageQuality;
    // document.querySelector("div").style.animationDuration = animationSpeed;
  }

  function setCookie(name, value, days) {
    // Set a cookie with a specified name, value, and expiration date
    var expires = "";
    if (days) {
      var date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + encodeURIComponent(value) + expires + "; path=/";
  }

  function getCookie(name) {
    // Get the value of a cookie with a specified name
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
      var cookie = cookies[i].trim();
      if (cookie.indexOf(name + '=') == 0) {
        return decodeURIComponent(cookie.substring(name.length + 1));
      }
    }
    return null;
  }
</script>

<form>
  <fieldset>
    <legend>Performance settings</legend>
    <div>
      <label>
        <input type="radio" name="image-quality" value="low" checked>
        Low image quality
      </label>
    </div>
    <div>
      <label>
        <input type="radio" name="image-quality" value="high">
        High image quality
      </label>
    </div>
    <div>
      <label>
        <input type="radio" name="animation-speed" value="slow" checked>
        Slow animation speed
      </label>
    </div>
    <div>
      <label>
        <input type="radio" name="animation-speed" value="fast">
        Fast animation speed
      </label>
    </div>
  </fieldset>
  <div>
    <button type="button" onclick="setPerformanceSettings()">Save performance settings</button>
  </div>
</form>

In this example, we define a getPerformanceData() function that retrieves the value of a performance cookie and returns it as a JavaScript object. If the cookie doesn't exist, we return null.

We also define a setPerformanceData() function that takes a JavaScript object as an argument and sets a performance cookie with the JSON-encoded value of the object.

We then use the addEventListener() method to measure the page load time and update the performance data. We calculate the average load time by taking the weighted average of the previous load times and the current load time. We also update the visit count to keep track of how many times the user has visited the site.

Finally, we call the setPerformanceData() function to update the performance cookie with the new data.

Note that in this example, we set the max-age attribute of the cookie to one year (in seconds). This means that the cookie will expire after one year and will be deleted by the browser. You may want to adjust this value depending on your specific needs.