web-dev-qa-db-fra.com

Javascript pur - stocker l'objet dans un cookie

Pas de jQuery.

Je souhaite stocker un objet ou un tableau dans un cookie.

L'objet doit être utilisable après l'actualisation de la page.

Comment faire cela avec du JavaScript pur? J'ai lu de nombreux articles, mais je ne sais pas comment sérialiser correctement.

MODIFIER: Code:

var instances = {};
...
instances[strInstanceId] = { container: oContainer };
...
instances[strInstanceId].plugin = oPlugin;
...
JSON.stringify(instances); 
// throws error 'TypeError: Converting circular structure to JSON'

  1. Comment sérialiser instances?

  2. Comment conserver les fonctionnalités, mais modifier la structure de l'instance pour pouvoir sérialiser avec stringify?

javascriptobjectcookies
36
Shlomo

Essayez celui-là pour écrire

function bake_cookie(name, value) {
  var cookie = [name, '=', JSON.stringify(value), '; domain=.', window.location.Host.toString(), '; path=/;'].join('');
  document.cookie = cookie;
}

Pour le lire, il faut:

function read_cookie(name) {
 var result = document.cookie.match(new RegExp(name + '=([^;]+)'));
 result && (result = JSON.parse(result[1]));
 return result;
}

Pour le supprimer, prenez:

function delete_cookie(name) {
  document.cookie = [name, '=; expires=Thu, 01-Jan-1970 00:00:01 GMT; path=/; domain=.', window.location.Host.toString()].join('');
}

Pour sérialiser des objets/instances complexes, pourquoi ne pas écrire une fonction de vidage de données dans votre instance:

function userConstructor(name, street, city) {
   // ... your code
   this.dumpData = function() {
     return {
        'userConstructorUser': {
            name: this.name,
            street: this.street,
            city: this.city
         }
       }
    }

Ensuite, vous videz les données, les chaînez, les écrivez dans le cookie et la prochaine fois que vous souhaitez les utiliser, allez simplement:

  var mydata = JSON.parse(read_cookie('myinstances'));
  new userConstructor(mydata.name, mydata.street, mydata.city);
55
Beat Richartz

Utilisez la méthode .toString() de chaque objet si elle donne une sérialisation significative ou JSON.stringify(). Notez cependant que les cookies sont généralement de longueur limitée et ne pourront pas contenir de grandes quantités de données.

4
Oleg V. Volkov

Une classe d'adaptation des cookies de: http://www.sitepoint.com/cookieless-javascript-session-variables/

Tout ce que vous devez faire est de définir et d'obtenir des variables que vous devez stocker dans un cookie.

Fonctionne avec: int, chaîne, tableau, liste, objet complexe

Exemple:

var toStore =  Session.get('toStore');

if (toStore == undefined)
    toStore = ['var','var','var','var'];
else
    console.log('Restored from cookies'+toStore);

Session.set('toStore', toStore);

Classe:

// Cross reload saving
if (JSON && JSON.stringify && JSON.parse) var Session = Session || (function() {
// session store

var store = load();

function load()
{
    var name = "store";
    var result = document.cookie.match(new RegExp(name + '=([^;]+)'));

    if (result)
        return JSON.parse(result[1]);

    return {};
}

function Save() {
    var date = new Date();
    date.setHours(23,59,59,999);
    var expires = "expires=" + date.toGMTString();
    document.cookie = "store="+JSON.stringify(store)+"; "+expires;
};

// page unload event
if (window.addEventListener) window.addEventListener("unload", Save, false);
else if (window.attachEvent) window.attachEvent("onunload", Save);
else window.onunload = Save;

// public methods
return {

    // set a session variable
    set: function(name, value) {
        store[name] = value;
    },

    // get a session value
    get: function(name) {
        return (store[name] ? store[name] : undefined);
    },

    // clear session
    clear: function() { store = {}; }
};
})();
3
Jean-Robin Tremblay

Si vous pouvez sérialiser votre objet dans sa représentation sous forme de chaîne canonique et le désérialiser à nouveau sous sa forme d'objet à partir de ladite représentation sous forme de chaîne, alors oui, vous pouvez le placer dans un cookie.

2
Clément Andraud