Here's an example of how you can use a security cookie to store and retrieve data related to user authentication:

<script>
  // Get the value of the security cookie, or create a new one if it doesn't exist
  var securityToken = getSecurityToken() || generateSecurityToken();
  
  // Send the security token with each HTTP request
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "https://example.com/data");
  xhr.setRequestHeader("X-Security-Token", securityToken);
  xhr.send();
  
  function generateSecurityToken() {
    // Generate a random security token using the crypto API
    var array = new Uint8Array(16);
    crypto.getRandomValues(array);
    var token = "";
    for (var i = 0; i < array.length; i++) {
      token += ("00" + array[i].toString(16)).slice(-2);
    }
    // Set a cookie with the security token
    document.cookie = "securityToken=" + encodeURIComponent(token) + "; secure; HttpOnly; SameSite=Strict";
    return token;
  }
  
  function getSecurityToken() {
    // Get the value of the security cookie
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
      var cookie = cookies[i].trim();
      if (cookie.indexOf('securityToken=') == 0) {
        return decodeURIComponent(cookie.substring('securityToken='.length));
      }
    }
    return null;
  }
</script>

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

We also define a generateSecurityToken() function that generates a random security token using the crypto API. We then set a cookie with the security token, using the secure, HttpOnly, and SameSite attributes to enhance the security of the cookie. We then return the token.

We then use the XMLHttpRequest object to send an HTTP request to https://example.com/data. We set the X-Security-Token header to the value of the security token, which allows the server to verify that the user is authenticated.

Note that in this example, we use the crypto API to generate a secure random number. This API is only available in modern browsers, so you may need to provide a fallback implementation for older browsers.

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.

Browser cookies can be used to store small amounts of data on the client-side (i.e. the user's browser), and they can be used for a variety of purposes, including:

1. Session management: Cookies can be used to maintain session information, such as user authentication tokens, across multiple requests.

2. Personalization: Cookies can be used to store user preferences or settings, such as language, theme, or font size.

3. Tracking: Cookies can be used to track user behavior, such as page views or clicks, for analytics or advertising purposes.

4. E-commerce: Cookies can be used to store items in a user's shopping cart or to remember user details during the checkout process.

5. Performance: Cookies can be used to improve website performance by caching frequently used data or settings.

6. Security: Cookies can be used to implement security features, such as CSRF protection or rate limiting.

It's important to note that cookies have some limitations and potential drawbacks, such as privacy concerns, cross-site scripting vulnerabilities, and size limitations. As a result, it's important to use cookies carefully and responsibly, and to consider alternative storage mechanisms when necessary.

Here's an updated example that uses the newer localStorage API instead of cookies to store the bookmarked page:

<script>
  function setBookmark() {
    // Save the current page URL to localStorage
    localStorage.setItem("bookmark", window.location.href);
    alert("Page bookmarked!");
  }

  // Check if the bookmark is saved in localStorage, and display a message to the user
  var bookmark = localStorage.getItem("bookmark");
  if (bookmark) {
    alert("You have bookmarked this page: " + bookmark);
  }
</script>

<a href="#" onclick="setBookmark()">Bookmark this page</a>

In this example, we use the localStorage API to save the bookmarked page URL instead of using cookies. The localStorage API provides a simple way to store data on the user's browser that persists even after they close the browser window.

We define a setBookmark() function that saves the current page URL to localStorage and displays an alert to confirm that the page has been bookmarked. We also check if the bookmark is already saved in localStorage when the page loads, and display a message to the user if it is.

The link to bookmark the page calls the setBookmark() function when clicked.

Note that this example uses the localStorage API, which is supported by most modern browsers. However, if you need to support older browsers, you may need to use a polyfill or fallback approach that uses cookies or other storage mechanisms.