使用 Javascript 获取 cookie 值时出错

Question

我正在尝试使用 JavaScript 添加和检索 cookie。我的代码是

   function setCookie(name,value,days) {
                    var date = new Date();
                    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                    var expires = "; expires=" + date.toGMTString();            
                    document.cookie = name + "=" + value + expires + ";";
                    alert("Hello you are : "+getCookie(name)); // displaying alert message 'Hello you are :'
            }
            function getCookie(cname) { //any problem with this code?
                var rcookies = document.cookie;
                var cookiearray = rcookies.split(";");
                for (i=0;i<cookiearray.length;i++){
                    var value=cookiearray[i];
                    value=value.split("=");
                if(value[0]==cname){
                    return value[1];
                }
                }
                return "";
            }
    
    function checkCookie() {
        var user = getCookie("user");
        if (user != "") {
            alert("You are " + user); // This alert is Never displayed But it need to be. 
        } else {
            user = document.getElementById("name").value;
            alert(user); // displaying the value of text field
            setCookie("user", user, 1);
        }
    }

    <form>
    	<input type="text" id="name" name="name" required="required">
    	<input type="button" onclick="checkCookie();" id="buttons" name="button" value="cookie">
    </form>
   

问题是当我点击它设置 cookie 的按钮时（我在“查看站点信息”中看到它，它就在那里）但是当我尝试使用 getCookie 方法获取 cookie 时，它​​没有显示 cookie 值保存在 cookie 中。而且当我刷新页面并按“查看站点信息”图标再次查看 cookie 时，它​​在那里显示 0 个 cookie。 代码有什么问题？还是我做错了什么？

Answer 1

您的按钮提交表单。如果您不需要提交表单，则不要使用form 标签，或者将按钮放在它之外。或者，取消按钮单击的默认操作。

使用这个 HTML（没有 form）它可以正常工作：

<input id="name"><button onclick="checkCookie()">Check</button>

查看它在this fiddle 中运行

如果你需要form标签，那么通过在onclick属性中添加return false来取消点击的默认效果：

<form>
    <input type="text" id="name" name="name" required="required">
    <input type="button" onclick="checkCookie();return false;" id="buttons" name="button" value="cookie">
</form>

见fiddle。

本地文件

当您通过file:// 协议访问您的网页时，无法保证对 cookie 的支持：这取决于浏览器。签出：

• Where are cookies saved for a local HTML file?

因此，请确保将您的网页放在网络服务器上。你可以在你的电脑上安装一个，以防你真的不想把它放在互联网上。

或者，您可以决定使用 localStorage 代替 cookie。这对file:// 协议有更好的支持，而且语法更简单。