Ajout à localStorage objet (Enchaînement) [double]

Question

  

Possible en double:    Chaînage une fonction JavaScript

Je demande un question similaire, mais beaucoup de gens étaient confus et beaucoup de commentaires qui ont fait aucun sens (comme quelqu'un a commenté surcharge jQuery ... et cela n'a rien à voir avec jQuery).

Alors, voici ma question, comment puis-je ajouter à l'objet HTML5 localStorage et faire une fonction personnalisée appelée addItem ()? Il pourrait être utilisé comme:

localStorage.getItem('names').addItem('Bill').getItem('names');

ou

localStorage.getItem('names').addItem('Bill');

Dernière fois paniqué demander pourquoi je ferais getItem deux fois. La première getItem recevrais les éléments à l'intérieur des noms. Il y aura toujours quelque chose à l'intérieur des noms. addItem ajouterait aux noms, puis, getItem retournerait à nouveau les noms, mais le projet de loi serait à l'intérieur.

Maintenant, ce serait tout aussi bon pour moi pour que cela fonctionne comme le deuxième exemple. getItem retournerait les noms, addItem le projet de loi ajouterait aux noms et puis retourner tous les noms, y compris le projet de loi.

Je pourrais faire setItem, qui fait partie de l'API HTML5, mais il est une douleur:

var names = JSON.parse(localStorage.getItem("names"));
names.push("Bill");
localStorage.setItem("names", JSON.stringify(names));

Answer 1

Les sons de suggestion de Anurag comme la meilleure façon d'aller à ce sujet (Mozilla Hacks montre l'autre option il expose ), mais de prendre un peu plus loin et faire chainable, vous pouvez faire quelque chose comme:

var MyLocalStorage = {};

MyLocalStorage.getItem = function(key) {
    return new MyItem(JSON.parse(localStorage.getItem(key)));
};

MyLocalStorage.setItem = function(key, object) {
    localStorage.setItem(key, JSON.stringify(object));
    return this.getItem(key);
};

function MyItem(object, key) {
    this.item = object;
    this.key = key;
    this.addSubItem = function(subItem) {
        if (typeof this.item.push == 'function') {
            this.item.push(subItem);
            this.save();
            return this;
        }
        return false;
    };
    this.setItem = function(object) {
        this.item = object;
        this.save();
        return this;
    };
    this.save = function() {
        MyLocalStorage.setItem(this.key, this.item);
    };
    this.toString = function() {
        return this.item.toString();
    }
}

Ensuite, vous pouvez l'utiliser comme:

alert(
    MyLocalStorage
        .setItem('names', ['john', 'paul', 'ringo'])
        .addSubItem('george')
        .toString()
);

BTW. Il est presque impossible de trouver de la documentation officielle sur l'objet LocalStorage (par exemple le MDC ou toute autre bibliothèque de documentation en ligne JS)

Answer 2

Les magasins de l'API de stockage d'une clé, des paires de valeurs qui sont les deux chaînes. Ils ont donc besoin d'être sérialisé en quelque sorte, et plus tard désérialisée lors de la récupération. Dans votre exemple, vous utilisez JSON comme mécanisme de sérialisation (de).

getItem renvoie toujours la chaîne que vous avez enregistré. Il doit être désérialisé avant d'obtenir un objet hors de celui-ci. Vous pouvez modifier la fonction native de getItem et faire la (de) sérialisation en interne ou écrire un wrapper pour localStorage qu'il fait pour vous. S'il vous plaît lire les autres réponses avant de réafficher la question. Voilà ce que les autres réponses ont dit. Ils n'ont pas dit que vous devez utiliser jQuery . L'écriture d'un emballage est assez simple.

var MyLocalStorage = {};

MyLocalStorage.getItem = function(key) {
    return JSON.parse(localStorage.getItem(key));
};

MyLocalStorage.setItem = function(key, object) {
    localStorage.setItem(key, JSON.stringify(object));
};