adding into and reading all array from JQuery cookie

Question

Im trying to examine a simple html page that I could add data as I pressed 1st button into jquery cookie array and in another button could read all cookie values in a list.

simply attempting to add to cookie array and print its values into a span. but simply this code does not throw any console error. and array size alerts always zero. what is the problem with my js codes ? Can you help?

    <html>
    <head>
        <script src="Scripts/jquery-2.2.0.min.js"></script>
        <script src="Scripts/jquery.cookie.js"></script>

    </head>
    <body>
        <form id="form1">
            <div>

                <input id="Text1" type="text" />

                <input id="Button1" type="button" value="ADD TO COOKIE ARRAY" onclick="addToCookie();" />
            </div>
        </form>
        <p>
            <input id="Button2" type="button" value="READ ALL COOKIE ARRAY INTO SPAN" onclick="readAllFromCookie();" />
            <span id="span_listhere"></span>
        </p>

        <script type="text/javascript">

            ///////////////////////
            $.cookie.defaults.path = '/';
            var cookieList = function (cookieName) {

                var cookie = $.cookie(cookieName);
                var items = cookie ? cookie.split(/,/) : new Array();

                return {
                    "add": function (val) {
                        var index = items.indexOf(val);
                        if (index == -1) {
                            items.push(val);
                            $.cookie(cookieName, items.join(','));
                        }
                    },
                    "remove": function (val) {
                        indx = items.indexOf(val);
                        if (indx != -1) items.splice(indx, 1);
                        $.cookie(cookieName, items.join(','));
                    },
                    "clear": function () {
                        items = null;
                        $.cookie(cookieName, null);
                    },
                    "items": function () {
                        return items;
                    }
                }
            }
            ///////////////////////
             list_stockno = new cookieList("c_stockno");

            ///////////////////////
            function addToCookie() {
                alert("addToCookie has been started");
                $stockno = $('#Text1').val();

                list_stockno.add($stockno);

                alert(list_stockno.items.length);
            }
            ///////////////////////
            function readAllFromCookie() {
                alert("readAllFromCookie has been started");

                for ($i = 0; $i < list_stockno.items.length; $i++) {
                    $sn = list_stockno[$i];

                    $mydata = ("stockno:" + $sn);
                    $('#span_listhere').append($mydata);
                }


            }

        </script>
    </body>
    </html>

Modified as mentioned in responses. but no luck

this is not an answer. just added path parameter name/value pair. as you mentioned below, no luck. still array value alerts to zero and nothing happens. andalso no any console error occuring as I press both of button elements.

<html>
<head>
    <script src="Scripts/jquery-2.2.0.min.js"></script>
    <script src="Scripts/jquery.cookie.js"></script>

</head>
<body>
    <form id="form1">
        <div>

            <input id="Text1" type="text" />

            <input id="Button1" type="button" value="ADD TO COOKIE ARRAY" onclick="addToCookie();" />
        </div>
    </form>
    <p>
        <input id="Button2" type="button" value="READ ALL COOKIE ARRAY INTO SPAN" onclick="readAllFromCookie();" />
        <span id="span_listhere"></span>
    </p>

    <script type="text/javascript">

        ///////////////////////

        var cookieList = function (cookieName) {

            var cookie = $.cookie(cookieName, { path: '/' });
            var items = cookie ? cookie.split(/,/) : new Array();

            return {
                "add": function (val) {
                    var index = items.indexOf(val);
                    if (index == -1) {
                        items.push(val);
                        // $.cookie(cookieName, items.join(','));
                        $.cookie(cookieName, items.join(','), { path: '/' });
                    }
                },
                "remove": function (val) {
                    indx = items.indexOf(val);
                    if (indx != -1) items.splice(indx, 1);
                    $.cookie(cookieName, items.join(','), { path: '/' });
                },
                "clear": function () {
                    items = null;
                    $.cookie(cookieName, { path: '/' });
                },
                "items": function () {
                    return items;
                }
            }
        }
        ///////////////////////
         list_stockno = new cookieList("c_stockno");

        ///////////////////////
        function addToCookie() {
            alert("addToCookie has been started");
            $stockno = $('#Text1').val();

            list_stockno.add($stockno);

            alert(list_stockno.items.length);
        }
        ///////////////////////
        function readAllFromCookie() {
            alert("readAllFromCookie has been started");

            for ($i = 0; $i < list_stockno.items.length; $i++) {
                $sn = list_stockno[$i];

                $mydata = ("stockno:" + $sn);
                $('#span_listhere').append($mydata);
            }


        }

    </script>
</body>
</html>

score 0 · Answer 1 · answered Jan 18 '16 at 18:50

0

might not be that, but just to be sure, have you tried specifying a path to your cookie?

$.cookie(cookieName, items.join(','), { path: '/YourAppName' });

answered Jan 18 '16 at 18:50

jon

910
3
12
34

also have a look at this one: https://stackoverflow.com/questions/1458724/how-to-set-unset-cookie-with-jquery?rq=1 – jon Jan 18 '16 at 19:05
shall the code not working without path parameter ?. so I have to add path name value pair parameter for each line of $.cookie ? – Zen Of Kursat Jan 18 '16 at 20:30
$.cookie.defaults.path = '/'; also that does not made any sense for the initial code. I just want to add data from text element to jquery cookie.and read array back. how should it be difficult ? is there any better library rather than default jquery.cookie ? – Zen Of Kursat Jan 18 '16 at 20:44
try with plain js (like in this link: https://stackoverflow.com/questions/1458724/how-to-set-unset-cookie-with-jquery?rq=1 answer from Russ Cam) – jon Jan 18 '16 at 21:50

adding into and reading all array from JQuery cookie

1 Answers1