本地HTML文件无法保存Cookie的问题求助

我在在线测试一个Cookie示例时，Chrome浏览器里完全正常——页面会请求输入名字，刷新后就不会再重复询问，说明Cookie成功保存了。但当我把示例代码保存成本地HTML文件后，情况就不对了：每次刷新页面都会重新弹出输入名字的提示，看起来Cookie根本没被保存。Edge浏览器也是同样的结果，在线测试正常，本地文件就失效。

我本来是想通过这个简化示例，排查自己项目里Cookie无法保存的问题，结果现在这个简化版也出现了一模一样的问题。

调试时我确认setCookie函数确实被调用了，但getCookie就是拿不到对应的值。甚至直接在控制台里执行document.cookie尝试手动创建Cookie，也没有任何效果，截图如下：

以下是我保存的本地HTML代码：

<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function checkCookie() {
  let user = getCookie("username");
  if (user != "") {
    alert("Welcome again " + user);
  } else {
     user = prompt("Please enter your name:","");
     if (user != "" && user != null) {
       setCookie("username", user, 30);
     }
  }
}
</script>
</head>

<body onload="checkCookie()"></body>

</html>

有没有大佬能帮我看看这到底是哪里出问题了呀？

备注：内容来源于stack exchange，提问作者Juan Carlos Oropeza