Chrome浏览器中设置的Cookies无法正常显示问题求助

Hey there! Let's dig into why your cookie code works in IE but not in Chrome—this is a common gotcha, so I’ve got a few fixes and explanations for you.

最可能的根源：本地文件（file://协议）的限制 #

Chrome has a strict security policy that blocks cookies from being set/read in local files opened via the file:// protocol (like when you double-click an HTML file to open it). IE, on the other hand, is more lenient with local file cookies. This is almost certainly the main issue if you're testing directly from your desktop.

Fix: Use a local HTTP server #

Run your code through a simple local server instead of opening the file directly. Here are easy ways to do this:

• Node.js: Install http-server globally with npm install -g http-server, then navigate to your file directory in the terminal and run http-server. Access your page at http://localhost:8080.
• Python: For Python 3, run python -m http-server; for Python 2, use python -m SimpleHTTPServer. Access via http://localhost:8000.

Code Improvements (Even for Server Environments) #

Your code has a few small issues that could cause compatibility problems down the line—let's fix those too:

1. Replace escape() with encodeURIComponent()
escape() is deprecated and doesn't handle Unicode characters properly. encodeURIComponent() is the modern, recommended way to encode cookie values.

2. Fix the Path parameter whitespace
   Your code has ";path =" + path—the space before the equals sign will break the Path attribute in Chrome (even though you aren't passing a path right now, this will cause issues if you do later). Change it to ";path=" + path (no space).

3. Use toGMTString() for better expires compatibility
   While toUTCString() works in most browsers, toGMTString() is the historically recommended format for cookie expiration dates and has broader legacy support.

Revised Code #

function setCookie(name, value, expires, path) {
  value = encodeURIComponent(value); // Replace deprecated escape()
  if (!expires) {
    var now = new Date();
    now.setMonth(now.getMonth() + 6);
    expires = now.toGMTString(); // More compatible expiration format
  }
  let cookieStr = `${name}=${value};expires=${expires}`;
  if (path) {
    cookieStr += `;path=${path}`; // Fixed whitespace in path attribute
  }
  document.cookie = cookieStr;
}

setCookie("Name", "Bob");
setCookie("Age", "101");
setCookie("FirstVisit", "10 May 2017");
alert(document.cookie);

How to Verify #

1. Launch your local server and access your page via http://localhost:... instead of file://.
2. Open Chrome DevTools (F12), go to the Application tab, and check Cookies > [your localhost domain]—you should see all three cookies listed there.
3. Run the code again, and the alert should display all three key-value pairs as expected.

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