Javascript 问题

Question

首先，让我先说我的教授对过去根深蒂固。我们的最后一个作业要求我们在图片顶部 float 链接。

您也可能会说他疯了，因为为了测试我们的页面，他要求所有功能(包括 cookie)都使用“客户端技术”实现，即不在服务器上。他使用 Firefox 来测试页面，所以唯一的好处是他不关心跨浏览器的兼容性。

话虽如此，我对我们最近的任务有疑问。我们正在制作一个“购物车”系统，使用 Javascript 和 cookie 来存储要购买的商品。这很好，除了我的函数中出于某种原因向 cookie 添加新元素，将某些内容分配给 document.cookie 不起作用。

你可以找到我的整个网站here ^{.zip file download} (如果你有什么想知道的，“你到底为什么要那样做？太疯狂了!”——这要么是直接分配，要么是一种尝试将痛苦降到最低的方法。)

这是我的问题代码，应该修改 cookie:

var mycookies = new function (){
    var cookies = document.cookie.split(';');
    var cookie, values;
    this.items = [];
    for(var x = 0; x < cookies.length; x++){
        if(cookies[x] != ""){
            cookie = cookies[x].split('=')[0].trim()
            values = cookies[x].split('=')[1]
            values = values.split(',');
            if(!this.items[cookie]){
                this.items.push(cookie);
                this[cookie] = new function(){};
            }
            this[cookie].size = values[0];
            this[cookie].qty = parseInt(values[1]);
        }
    }
    this.render = function(){
        var values, cookies = "", cookie;
        for(var x = 0; x < this.items.length; x++){
            cookie = this.items[x];
            values = [this[cookie].size, this[cookie].qty].join(',');
            cookies += cookie + "=" + values + '; ';
        }
        return cookies;    
    }                      
    this.clear = function(){
        for(var x = 0; x < this.items.length; x++){
            delete this[this.items[x]];
        }                  
        this.items = [];
        document.cookie['expires'] = '26 Aug 1984 01:01:01 UTC;';
    }                      
    this.additem = function(){
        var i = document.forms[0].size.selectedIndex;
        if (this.items[page]){
            this[page].size = document.getElementById('size').value;
            this[page].qty = document.getElementById('qty').value;
        }                  
        else{              
            this.items.push(page);
            this[page] = new function(){};
            this[page].size = document.getElementById('size').value;
            this[page].qty = document.getElementById('qty').value;
        }
        console.log(this.render()); // For use with firebug
        document.cookie = this.render();
        console.log(document.cookie); // For use with firebug
    }
}

当我关闭它时，firebug 提供了这个输出:

expires=12 Aug 2001 01:01:01 UTC,NaN; whitec=Small,3;
expires=12 Aug 2001 01:01:01 UTC,NaN

现在，我希望 1) 我的 cookie 已经过期(我通过 firebug 手动设置过期，我的解析稍后添加了 NaN，但它仍然存在)，以及 2) cookie 的值更改为this.render()

的结果

除了客户端 cookie 行为不受 w3 规范保证这一显而易见的事实之外，我是否遗漏了什么？ (编辑 - 我的意思是当页面在客户端时，作为文件打开 - 不由服务器提供服务)这真的很令人恼火 - 我尝试了多种不同的 Angular ，但没有“javascript cookie”搜索或“修改 cookie javascript”会引导我找到任何有用的信息。关于如何修复它有什么建议吗？

或者我应该通过电子邮件向我的教授发送一个指向 w3 规范的链接，并告诉他要求我们支持 cookie 客户端是愚蠢的吗？

Answer 1

document.cookie 的工作原理与您显然认为的不同。当您设置变量值时，您一次设置一个cookie。因此，如果您想设置对象中保存的所有 cookie，您将遍历“items”数组并连续为每个名称/值对设置 document.cookie(转换为一个“cookieName=cookieValue”字符串)。

这是所有现代浏览器的事实。参见 this Mozilla documentation page例如。

关于代码的其他评论，因为您非常好地发布了它:

        cookie = cookies[x].split('=')[0].trim()
        values = cookies[x].split('=')[1]

最好只调用一次“split”。

            this[cookie] = new function(){};

这基本上等同于 this[cookie] = {}; 将属性设置为一个新的空对象。