用于在表单提交上设置 cookies 的 JS 适用于 Firefox 但不适用于 Edge/Chrome

Question

I have a bootstrap modal that pops up when a page loads asking a user to set their location and saves this value to a cookie.

This all works fine in Firefox however doesn't work in Edge or Chrome. Anyone have any ideas?

<script>
function setCookie(cookieName, cookieValue, nDays) {
    
    var today = new Date();
    var expire = new Date();

    if (!nDays) 
        nDays=1;
    expire.setTime(today.getTime() + 3600000*24*nDays);
    document.cookie = cookieName+"="+escape(cookieValue) + ";expires="+expire.toGMTString();
    return false
}
</script>

<div class="modal_container">
     
        <!-- Modal -->
        <div class="modal fade" id="store_prompt" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLongTitle">Location Number</h5>
                </div>
                <div class="modal-body">
                    <form onsubmit="javascript:return setCookie('location', this.querySelector('select').value, 365);">
                        <div class="form-group">
                            <label for="LocationSelect">Please select your location below.</label>
                            <select class="form-control" id="LocationSelect">
                              <option value='1' >1 - Location A</option>
                              <option value='2' >2 - Location B</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary btn-lg btn-block" onclick="closemodal(); location.reload();">Save changes</button>
                    </form> 
                </div>
              </div>
            </div>
</div>

Answer 1

Do you test the code through file protocol like file:///C:/... ? If so, I can reproduce the situation you encountered.

Your code is right. But cookies are not set when browsing using the file:/// protocol, depending on the browser. You need to run your page on a http/https server then the code can work on all browsers.

Result:

Answer 2

I think this might be because of the issues mentioned in this question. Please go through these. It might solve your issue. Why would setting document.cookie not work in Chrome?