使用JavaScript Cookie的简单购物车

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用JavaScript Cookie的简单购物车相关的知识,希望对你有一定的参考价值。

我有以下代码使用javascript实现简单的练习购物车。有一个结账链接,调用getcookie()来检查存储的cookie的值。如果cookie中没有任何内容,则单击链接警报以进行输入。如果在输入框中输入了非值并点击“添加到购物车”,则完成验证并提醒错误消息。

由于某种原因,cookie没有从输入字段中获取值。我现在尝试了一段时间,但无法调试代码。最后只显示一个空警报框。我很感激任何调试。提前致谢。

<script type="text/javascript">
    var value;
    var productID;

    function setItem(abd) {
        value = abd.value;
        productID = abd.getAttribute("productID");
        var intRegex = /^d+$/;
        var numberOfItems;
        if (!intRegex.test(value) || (value <= 0)) {
            alert('Please Enter valid numberofitem');
        } else {
            numberOfItems = value;
        }
    }
    function getCookie() {
        if (value == undefined) {
            alert("There is nothing in the shopping cart!");
        } else {
            var cookieArray = document.cookie.split(';');
            var printHolder = "";
            for (var i = 0; i < cookieArray.length; ++i) {
                var pairArray = cookieArray[i].split('=');
                alert(pairArray[0]);
            }
            alert(printHolder);
        }
    }
    function setCookie() {
        if (value == undefined) {
            alert("Please add number of items in text box");
        } else {
            document.cookie = productID + "=" + value + "; ";
            alert(value + " Product(s) with id " + productID +
                " has been added to shopping cart!");
        }
    }

</script>
<a href="javascript:getCookie()"> Checkout </a>
<input name="item-select" id="item-select"
       productid="p001"  style="width: 50px" onBlur="setItem(this)" >
<button type="button" onclick="setCookie()">Add to cart.</button>

我想要的结果就是这样的结果!

答案

这段代码完美地适用于一些变化。我正在使用chrome,后来发现了这一点

当文件位于local machine上并使用文件路径直接加载到浏览器中时,Google Chrome不会创建Cookie。

而是尝试使用localhost.当您将代码放入服务器时,它肯定会起作用。 Chrome在这里变得很痛苦!

如果你想用Javascript创建购物车,请点击此链接。 http://www.smashingmagazine.com/2014/02/create-client-side-shopping-cart/

另一答案

你的getCookie可能会给你不正确的结果。

var cookiearray= document.cookie.split(';');
var toprint="";
for(var i=0; i<cookiearray.length; ++i) 
{ 
    var pairArray= cookiearray[i].split('=');
    alert(pairArray[0]);
}
alert(toprint);

这里有两件事不对;

1)当你处于for循环中时,每次循环时,你都会一直警告数组中的第一项pairArray [0]你需要将它改为pairArray [i]

2)您显示为空警报,因为这是您分配给toprint变量的内容。 - 您在for循环之前为顶部分配了一个空字符串,然后您在不为其赋值的情况下警告该变量,因此您将显示一个空的警告框! - 还要确保您的cookie数组不为空。

尝试一下,享受编码:)

以上是关于使用JavaScript Cookie的简单购物车的主要内容,如果未能解决你的问题,请参考以下文章

jQuery使用cookie与json简单实现购物车功能

使用 Javascript 实现购物车?

如何使用带数组和ajax的cookie?

PHP简单实现购物车

2019/1.6 Javascript Cookie

cookie使用举例(添加购物车商品_移除购物车商品)