如何配置Cookie实现隐私政策Modal仅向用户展示一次？

Solution: Add Cookie Control to Your Modal #

Hey there! Let's get your privacy policy modal to only show once per user (and reappear if they clear their cookies). Here's a straightforward way to implement this with vanilla JavaScript and your existing Bootstrap modal setup:

Step 1: Add Cookie Helper Functions #

First, we'll need simple functions to read and set cookies—native JS doesn't have built-in methods for this, so these helpers will make the process easy:

// Helper function to read a cookie by name
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

// Helper function to set a cookie with expiration
function setCookie(name, value, days) {
  let expires = "";
  if (days) {
    const date = new Date();
    date.setTime(date.getTime() + (days*24*60*60*1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = `${name}=${value || ""}${expires}; path=/; SameSite=Lax`;
}

Step 2: Modify Your Modal Initialization Code #

Update your existing $(document).ready block to check for the cookie before showing the modal. We'll also add an event listener to set the cookie when the modal is closed:

$(document).ready(function(){
  // Check if the "modalShown" cookie doesn't exist
  if (!getCookie("modalShown")) {
    $("#modal").modal('show');
  }

  // Set the cookie when the modal is closed
  $("#modal").on('hidden.bs.modal', function () {
    setCookie("modalShown", "true", 30); // Expires in 30 days - adjust as needed
  });
});

Step 3: Keep Your Existing Modal HTML #

You don't need to change your existing modal structure—keep it exactly as you have it:

<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Privacy Policy</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ... <!-- Your privacy policy content here -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

How It Works #

• When the page loads, we check if the modalShown cookie exists. If it doesn't, we trigger the modal to show.
• When the user closes the modal (via the close button, the X, or clicking outside), the hidden.bs.modal Bootstrap event fires, and we set the modalShown cookie to expire in 30 days (tweak this number to match your desired refresh interval).
• If the user clears their browser cookies, the modalShown cookie will be removed, so the modal will pop up again on their next visit.

Quick Notes #

• The SameSite=Lax attribute is included for better security and compatibility with modern browsers.
• If you want the modal to reappear after a longer or shorter period, just change the 30 in setCookie("modalShown", "true", 30) to your preferred number of days.

内容的提问来源于stack exchange，提问作者Tom