web-dev-qa-db-fra.com

Créer un tableau dans un cookie avec javascript

Est-il possible de créer un cookie à l'aide de tableaux?

Je souhaite stocker a[0]='peter', a['1']='esther', a['2']='john' dans un cookie en JavaScript.

javascriptcookies
18
limfreak

Comme vous pouvez le lire dans cette rubrique topic :

Vous combinez l’utilisation jQuery.cookie plugin et JSON et résolvez votre problème. 

Lorsque vous souhaitez stocker un tableau, vous créez un tableau dans JS et utilisez JSON.stringify pour le transformer en chaîne et le stocker avec $.cookie('name', 'array_string').

var myAry = [1, 2, 3];
$.cookie('name', JSON.stringify(myAry));

Lorsque vous souhaitez récupérer le tableau à l'intérieur du cookie, vous utilisez $.cookie('name') pour récupérer la valeur du cookie, puis JSON.parse pour le récupérer à partir de la chaîne.

var storedAry = JSON.parse($.cookie('name'));
//storedAry -> [1, 2, 3]
45
Anton Tsapov

Les cookies ne peuvent contenir que des chaînes. Si vous voulez simuler un tableau, vous devez le sérialiser et le désérialiser.

Vous pouvez le faire avec une bibliothèque JSON .

8
Quentin

J'ajoute le code ci-dessous Script (voir le code suivant) dans un fichier javascript appelé CookieMonster.js. 

C'est un wrapper autour de l'extrait actuel de http://www.quirksmode.org/js/cookies.html

Cela fonctionne avec les tableaux et les chaînes, il échappera automatiquement de la virgule , et du point-virgule ; de votre tableau/chaîne (qui ne sont pas gérés dans les extraits de code d'origine). 

J'ai énuméré l'utilisation simple et certains bonus utilisés. 

Usage: 

//set cookie with array, expires in 30 days
var newarray = ['s1', 's2', 's3', 's4', 's5', 's6', 's7'];
cookiemonster.set('series', newarray, 30); 

var seriesarray = cookiemonster.get('series'); //returns array with the above numbers

//set cookie with string, expires in 30 days
cookiemonster.set('sample', 'sample, string;.', 30); 

var messagestring = cookiemonster.get('sample'); //returns string with 'sample, string;.'

Bonus: 

//It also conveniently contains splice and append (works for string or array (single string add only)).

//append string
cookiemonster.append('sample', ' add this', 30); //sample cookie now reads 'sample, string;. add this' 

//append array
cookiemonster.append('series', 's8', 30); //returns array with values ['s1', 's2', 's3', 's4', 's5', 's6', 's7', 's8'] 

//splice
cookiemonster.splice('series', 1, 2, 30); //returns array with values ['s1', 's4', 's5', 's6', 's7', 's8']

CookieMonster.js:

        var cookiemonster = new Object();

        cookiemonster.append = function (cookieName, item, expDays) {
            item = cm_clean(item);
            var cookievalue = cookiemonster.get(cookieName);
            if (cookievalue instanceof Array) {
                cookievalue[cookievalue.length] = item;
                cm_createCookie(cookieName, cm_arrayAsString(cookievalue), expDays);
            } else {
                cm_createCookie(cookieName, cookievalue + item, expDays);
            }
        };

        cookiemonster.splice = function (cookieName, index, numberToRemove, expDays) {
            var cookievalue = cookiemonster.get(cookieName);
            if (cookievalue instanceof Array) {
                cookievalue.splice(index, numberToRemove);
                cm_createCookie(cookieName, cm_arrayAsString(cookievalue), expDays);
            }
        };



        cookiemonster.get = function (cookieName) {
            var cstring = cm_readCookie(cookieName);
            if (cstring.indexOf('<#&type=ArrayVals>') != -1) {

                var carray = cstring.split(',');

                for (var i = 0; i < carray.length; i++) {
                        carray[i] = cm_dirty(carray[i]);
                }

                if (carray[0] == '<#&type=ArrayVals>') {
                    carray.splice(0, 1);
                }

                return carray;

            } else {

                return cm_dirty(cstring);
            }
        };

        cookiemonster.set = function (cookieName, value, expDays) {
            if (value instanceof Array) {
                cm_createCookie(cookieName, cm_arrayAsString(value), expDays);
            }
            else { cm_createCookie(cookieName, cm_clean(value), expDays); }

        };

        cookiemonster.eraseCookie = function (name) {
            cm_createCookie(name, "", -1);
        };

        function cm_replaceAll(str, find, replace) {

            return str.replace(new RegExp(find, 'g'), replace);
        };

        function cm_clean(ret) {
            ret = cm_replaceAll(ret.toString(), ',', '&#44');
            ret = cm_replaceAll(ret.toString(), ';', '&#59');
            return ret;
        };
        function cm_dirty(ret) {
            ret = cm_replaceAll(ret, '&#44', ',');
            ret = cm_replaceAll(ret, '&#59', ';');
            return ret;
        };

        function cm_createCookie(name, value, days) {
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                var expires = "; expires=" + date.toGMTString();
            } else var expires = "";
            document.cookie = name + "=" + value + expires + "; path=/";
        };

        function cm_readCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        };

        function cm_arrayAsString(array) {
            var ret = "<#&type=ArrayVals>"; //escapes, tells that string is array
            for (var i = 0; i < array.length; i++) {
                    ret = ret + "," + cm_clean(array[i]);
            }
            return ret;
        };
3
kingPuppy

Créer un tableau dans un cookie en utilisant jQUery?

var list = new cookieList("test"); $(img).one('click', function(i){ while($('.selected').length < 3) {
    $(this).parent()
        .addClass("selected")
        .append(setup.config.overlay);

    //$.cookie(setup.config.COOKIE_NAME, d, setup.config.OPTS);
    var index = $(this).parent().index();

    // suppose this array go into cookies.. but failed
    list.add( index );

    var count = 'You have selected : <span>' + $('.selected').length + '</span> deals';
    if( $('.total').length ){
        $('.total').html(count);
    }

}  });
1
Nahidul Hasan

Je suis d'accord avec d'autres commentaires - vous ne devriez pas le faire et vous devriez utiliser JSON. Cependant, pour répondre à votre question, vous pouvez pirater cela en stockant le tableau sous forme de chaîne délimitée par des virgules. Disons que vous vouliez enregistrer un tableau Javascript suivant dans un cookie:

var a = ['peter','esther','john'];

Vous pouvez définir une chaîne de cookie, puis parcourir le tableau:

// Create a timestamp in the future for the cookie so it is valid
var nowPreserve = new Date();
var oneYear = 365*24*60*60*1000; // one year in milliseconds
var thenPreserve = nowPreserve.getTime() + oneYear;
nowPreserve.setTime(thenPreserve);
var expireTime = nowPreserve.toUTCString();

// Define the cookie id and default string
var cookieId = 'arrayCookie';
var cookieStr = '';

// Loop over the array
for(var i=0;i<a.length;i++) {
    cookieStr += a[i]+',';
}

// Remove the last comma from the final string
cookieStr = cookieStr.substr(0,cookieStr.length-1);

// Now add the cookie
document.cookie = cookieId+'='+cookieStr+';expires='+expireTime+';domain='+document.domain;

Dans cet exemple, vous obtiendrez le cookie suivant (si votre domaine est www.example.com):

arrayCookie=peter,ester,john;expires=1365094617464;domain=www.example.com
1
tatlar

J'ai créé ce moyen facile d'obtenir des cookies. Ça va donner une erreur si exécuter ici, mais c'est fonctionnel 

var arrayOfCookies = [];
function parseCookieToArray()
{
    var cookies      = document.cookie;
    var arrayCookies = cookies.split(';');
    arrayCookies.map(function(originalValue){
        var name  = originalValue.split('=')[0];
        var value = originalValue.split('=')[1];
        arrayOfCookies[name] = value;
    });
}
console.log(arrayOfCookies); //in my case get out: [language: 'en_US', country: 'brazil']
parseCookieToArray();

Nouveau Mon nouvel obj à createget cookies

cookie = {
    set: function(name, value) {
        document.cookie = name+"="+value;
    },
    get: function(name) {
        cookies = document.cookie;
        r = cookies.split(';').reduce(function(acc, item){
            let c = item.split('='); //'nome=Marcelo' transform in Array[0] = 'nome', Array[1] = 'Marcelo'
            c[0] = c[0].replace(' ', ''); //remove white space from key cookie
            acc[c[0]] = c[1]; //acc == accumulator, he accomulates all data, on ends, return to r variable
            return acc; //here do not return to r variable, here return to accumulator
        },[]);
    }
};
cookie.set('nome', 'Marcelo');
cookie.get('nome');
1
Marcelo Rafael

Pour cet exemple, vous pouvez le faire assez facilement:

  • Faire des cookies:

    ///W3Schools Cookie Code:
function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";";
}

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

///My Own Code:
for(a=0;a<b.length;a++){
    setCookie(b[a],b[a],periodoftime);
}

  • Récupérer un tableau:

    for(a=0;a<b.length;a++){
    b[a] = getCookie(b[a])
}

Pour tout tableau avec d'autres types de valeur en plus des chaînes:

  • Faire des cookies: 

    ///Replace MyCode above With:
if(typeof b[a] === 'string'){
    setCookie(b[a],b[a],periodoftime);
}else{
    setCookie(b[a].toString,b[a],periodoftime);
}

  • Récupérer un tableau:

    for(a=0;a<b.length;a++){
    if(typeof b[a] === 'string'){
        b[a] = getCookie(b[a])
    }else{
        b[a] = getCookie(b[a].toString)
    }
}

Le seul défaut est que des valeurs identiques ne peuvent pas être récupérées.

Pas besoin de JQuery, de virgule ou JSON.

0
nobody