Stockage d'objets dans HTML5 localStorage

J'aimerais stocker un objet JavaScript en HTML5 localStorage, mais mon objet est apparemment en train d'être converti en chaîne.

Je peux stocker et récupérer des types et des tableaux JavaScript primitifs à l'aide localStorage, mais les objets ne semblent pas fonctionner. Devraient-ils?

Voici mon code:

var testObject = { 'one': 1, 'two': 2, 'three': 3 };
console.log('typeof testObject: ' + typeof testObject);
console.log('testObject properties:');
for (var prop in testObject) {
    console.log('  ' + prop + ': ' + testObject[prop]);
}

// Put the object into storage
localStorage.setItem('testObject', testObject);

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ' + retrievedObject);

La sortie de la console est

typeof testObject: object
testObject properties:
  one: 1
  two: 2
  three: 3
typeof retrievedObject: string
Value of retrievedObject: [object Object]

Il me semble que la setItemméthode convertit l'entrée en chaîne avant de la stocker.

Je vois ce comportement dans Safari, Chrome et Firefox, donc je suppose que c'est ma mauvaise compréhension de la spécification HTML5 Web Storage , pas un bug ou une limitation spécifique au navigateur.

J'ai essayé de comprendre l' algorithme de clone structuré décrit dans http://www.w3.org/TR/html5/infrastructure.html . Je ne comprends pas bien ce qu'il dit, mais mon problème est peut-être lié au fait que les propriétés de mon objet ne sont pas énumérables (???)

Existe-t-il une solution de contournement facile?

Mise à jour: Le W3C a finalement changé d'avis sur la spécification du clone structuré et a décidé de modifier la spécification pour qu'elle corresponde aux implémentations. Voir https://www.w3.org/Bugs/Public/show_bug.cgi?id=12111 . Cette question n'est donc plus valable à 100%, mais les réponses peuvent toujours être intéressantes.

En regardant à nouveau Apple , Mozilla et Mozilla documentation , la fonctionnalité semble être limitée pour gérer uniquement les paires clé / valeur de chaîne.

Une solution de contournement peut être de filtrer votre objet avant de le stocker, puis de l'analyser ultérieurement lorsque vous le récupérez:

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('retrievedObject: ', JSON.parse(retrievedObject));

Une amélioration mineure sur une variante :

Storage.prototype.setObject = function(key, value) {
    this.setItem(key, JSON.stringify(value));
}

Storage.prototype.getObject = function(key) {
    var value = this.getItem(key);
    return value && JSON.parse(value);
}

En raison de l' évaluation de court-circuit , getObject()va immédiatement revenir nullsi keyn'est pas dans le stockage. Il ne lèvera pas non plus d' SyntaxErrorexception if valueis ""(la chaîne vide; JSON.parse()ne peut pas gérer cela).

Vous pourriez trouver utile d'étendre l'objet Storage avec ces méthodes pratiques:

Storage.prototype.setObject = function(key, value) {
    this.setItem(key, JSON.stringify(value));
}

Storage.prototype.getObject = function(key) {
    return JSON.parse(this.getItem(key));
}

De cette façon, vous obtenez les fonctionnalités que vous vouliez vraiment, même si sous l'API ne prend en charge que les chaînes.

L'extension de l'objet Storage est une solution géniale. Pour mon API, j'ai créé une façade pour localStorage, puis je vérifie s'il s'agit d'un objet ou non lors de la configuration et de l'obtention.

var data = {
  set: function(key, value) {
    if (!key || !value) {return;}

    if (typeof value === "object") {
      value = JSON.stringify(value);
    }
    localStorage.setItem(key, value);
  },
  get: function(key) {
    var value = localStorage.getItem(key);

    if (!value) {return;}

    // assume it is an object that has been stringified
    if (value[0] === "{") {
      value = JSON.parse(value);
    }

    return value;
  }
}

Stringify ne résout pas tous les problèmes

Il semble que les réponses ici ne couvrent pas tous les types possibles en JavaScript, voici donc quelques exemples sur la façon de les traiter correctement:

//Objects and Arrays:
    var obj = {key: "value"};
    localStorage.object = JSON.stringify(obj);  //Will ignore private members
    obj = JSON.parse(localStorage.object);
//Boolean:
    var bool = false;
    localStorage.bool = bool;
    bool = (localStorage.bool === "true");
//Numbers:
    var num = 42;
    localStorage.num = num;
    num = +localStorage.num;    //short for "num = parseFloat(localStorage.num);"
//Dates:
    var date = Date.now();
    localStorage.date = date;
    date = new Date(parseInt(localStorage.date));
//Regular expressions:
    var regex = /^No\.[\d]*$/i;     //usage example: "No.42".match(regex);
    localStorage.regex = regex;
    var components = localStorage.regex.match("^/(.*)/([a-z]*)$");
    regex = new RegExp(components[1], components[2]);
//Functions (not recommended):
    function func(){}
    localStorage.func = func;
    eval( localStorage.func );      //recreates the function with the name "func"

Je ne recommande pas de stocker des fonctions car le eval()mal peut entraîner des problèmes de sécurité, d'optimisation et de débogage. En général,eval() ne doit jamais être utilisé dans du code JavaScript.

Membres privés

Le problème avec l'utilisation JSON.stringify()pour stocker des objets est que cette fonction ne peut pas sérialiser les membres privés. Ce problème peut être résolu en remplaçant la .toString()méthode (qui est appelée implicitement lors du stockage de données dans le stockage Web):

//Object with private and public members:
    function MyClass(privateContent, publicContent){
        var privateMember = privateContent || "defaultPrivateValue";
        this.publicMember = publicContent  || "defaultPublicValue";

        this.toString = function(){
            return '{"private": "' + privateMember + '", "public": "' + this.publicMember + '"}';
        };
    }
    MyClass.fromString = function(serialisedString){
        var properties = JSON.parse(serialisedString || "{}");
        return new MyClass( properties.private, properties.public );
    };
//Storing:
    var obj = new MyClass("invisible", "visible");
    localStorage.object = obj;
//Loading:
    obj = MyClass.fromString(localStorage.object);

Références circulaires

Un autre problème stringifyne peut pas être résolu sont les références circulaires:

var obj = {};
obj["circular"] = obj;
localStorage.object = JSON.stringify(obj);  //Fails

Dans cet exemple, JSON.stringify()lancera une TypeError "Conversion de structure circulaire en JSON" . Si le stockage de références circulaires doit être pris en charge, le deuxième paramètre de JSON.stringify()peut être utilisé:

var obj = {id: 1, sub: {}};
obj.sub["circular"] = obj;
localStorage.object = JSON.stringify( obj, function( key, value) {
    if( key == 'circular') {
        return "$ref"+value.id+"$";
    } else {
        return value;
    }
});

Cependant, trouver une solution efficace pour stocker des références circulaires dépend fortement des tâches à résoudre, et la restauration de ces données n'est pas non plus triviale.

Il y a déjà une question sur SO traitant de ce problème: Stringify (convertir en JSON) un objet JavaScript avec référence circulaire

Il existe une excellente bibliothèque qui englobe de nombreuses solutions, elle prend même en charge les anciens navigateurs appelés jStorage

Vous pouvez définir un objet

$.jStorage.set(key, value)

Et récupérez-le facilement

value = $.jStorage.get(key)
value = $.jStorage.get(key, "default value")

En théorie, il est possible de stocker des objets avec des fonctions:

function store (a)
{
  var c = {f: {}, d: {}};
  for (var k in a)
  {
    if (a.hasOwnProperty(k) && typeof a[k] === 'function')
    {
      c.f[k] = encodeURIComponent(a[k]);
    }
  }

  c.d = a;
  var data = JSON.stringify(c);
  window.localStorage.setItem('CODE', data);
}

function restore ()
{
  var data = window.localStorage.getItem('CODE');
  data = JSON.parse(data);
  var b = data.d;

  for (var k in data.f)
  {
    if (data.f.hasOwnProperty(k))
    {
      b[k] = eval("(" + decodeURIComponent(data.f[k]) + ")");
    }
  }

  return b;
}

Cependant, la sérialisation / désérialisation des fonctions n'est pas fiable car elle dépend de l'implémentation .

Je suis arrivé à ce message après avoir cliqué sur un autre message qui a été fermé en double - intitulé `` comment stocker un tableau dans le stockage local? ''. Ce qui est bien, sauf qu'aucun des threads ne fournit réellement une réponse complète quant à la façon dont vous pouvez maintenir un tableau dans localStorage - cependant j'ai réussi à créer une solution basée sur les informations contenues dans les deux threads.

Donc, si quelqu'un d'autre veut pouvoir pousser / pop / shift des éléments dans un tableau, et qu'ils veulent que le tableau soit stocké dans localStorage ou même sessionStorage, vous allez ici:

Storage.prototype.getArray = function(arrayName) {
  var thisArray = [];
  var fetchArrayObject = this.getItem(arrayName);
  if (typeof fetchArrayObject !== 'undefined') {
    if (fetchArrayObject !== null) { thisArray = JSON.parse(fetchArrayObject); }
  }
  return thisArray;
}

Storage.prototype.pushArrayItem = function(arrayName,arrayItem) {
  var existingArray = this.getArray(arrayName);
  existingArray.push(arrayItem);
  this.setItem(arrayName,JSON.stringify(existingArray));
}

Storage.prototype.popArrayItem = function(arrayName) {
  var arrayItem = {};
  var existingArray = this.getArray(arrayName);
  if (existingArray.length > 0) {
    arrayItem = existingArray.pop();
    this.setItem(arrayName,JSON.stringify(existingArray));
  }
  return arrayItem;
}

Storage.prototype.shiftArrayItem = function(arrayName) {
  var arrayItem = {};
  var existingArray = this.getArray(arrayName);
  if (existingArray.length > 0) {
    arrayItem = existingArray.shift();
    this.setItem(arrayName,JSON.stringify(existingArray));
  }
  return arrayItem;
}

Storage.prototype.unshiftArrayItem = function(arrayName,arrayItem) {
  var existingArray = this.getArray(arrayName);
  existingArray.unshift(arrayItem);
  this.setItem(arrayName,JSON.stringify(existingArray));
}

Storage.prototype.deleteArray = function(arrayName) {
  this.removeItem(arrayName);
}

exemple d'utilisation - stockage de chaînes simples dans un tableau localStorage:

localStorage.pushArrayItem('myArray','item one');
localStorage.pushArrayItem('myArray','item two');

exemple d'utilisation - stockage d'objets dans le tableau sessionStorage:

var item1 = {}; item1.name = 'fred'; item1.age = 48;
sessionStorage.pushArrayItem('myArray',item1);

var item2 = {}; item2.name = 'dave'; item2.age = 22;
sessionStorage.pushArrayItem('myArray',item2);

méthodes courantes pour manipuler les tableaux:

.pushArrayItem(arrayName,arrayItem); -> adds an element onto end of named array
.unshiftArrayItem(arrayName,arrayItem); -> adds an element onto front of named array
.popArrayItem(arrayName); -> removes & returns last array element
.shiftArrayItem(arrayName); -> removes & returns first array element
.getArray(arrayName); -> returns entire array
.deleteArray(arrayName); -> removes entire array from storage

Nous vous recommandons d'utiliser une bibliothèque d'abstraction pour de nombreuses fonctionnalités décrites ici ainsi qu'une meilleure compatibilité. Beaucoup d'options:

• jStorage ou simpleStorage << ma préférence
• localForage
• alekseykulikov / stockage
• Chaise de jardin
• Store.js << une autre bonne option
• OMG

Vous pouvez utiliser localDataStorage pour stocker de manière transparente les types de données javascript (tableau, booléen, date, flottant, entier, chaîne et objet). Il fournit également une obfuscation légère des données, comprime automatiquement les chaînes, facilite la requête par clé (nom) ainsi que la requête par (clé) valeur, et aide à appliquer le stockage partagé segmenté dans le même domaine en préfixant les clés.

[DISCLAIMER] Je suis l'auteur de l'utilitaire [/ DISCLAIMER]

Exemples:

localDataStorage.set( 'key1', 'Belgian' )
localDataStorage.set( 'key2', 1200.0047 )
localDataStorage.set( 'key3', true )
localDataStorage.set( 'key4', { 'RSK' : [1,'3',5,'7',9] } )
localDataStorage.set( 'key5', null )

localDataStorage.get( 'key1' )   -->   'Belgian'
localDataStorage.get( 'key2' )   -->   1200.0047
localDataStorage.get( 'key3' )   -->   true
localDataStorage.get( 'key4' )   -->   Object {RSK: Array(5)}
localDataStorage.get( 'key5' )   -->   null

Comme vous pouvez le voir, les valeurs primitives sont respectées.

Une autre option serait d'utiliser un plugin existant.

Par exemple, persisto est un projet open source qui fournit une interface facile à localStorage / sessionStorage et automatise la persistance des champs de formulaire (entrée, boutons radio et cases à cocher).

(Avertissement: je suis l'auteur.)

Vous pouvez utiliser ejson pour stocker les objets sous forme de chaînes.

EJSON est une extension de JSON pour prendre en charge plus de types. Il prend en charge tous les types sûrs JSON, ainsi que:

• Date (JavaScript Date)
• Binaire (JavaScript Uint8Arrayou le résultat de EJSON.newBinary )
• Types définis par l'utilisateur (voir EJSON.addType . Par exemple, Mongo.ObjectID est implémenté de cette façon.)

Toutes les sérialisations EJSON sont également des JSON valides. Par exemple, un objet avec une date et un tampon binaire serait sérialisé dans EJSON comme:

{
  "d": {"$date": 1358205756553},
  "b": {"$binary": "c3VyZS4="}
}

Voici mon wrapper localStorage utilisant ejson

https://github.com/UziTech/storage.js

J'ai ajouté quelques types à mon wrapper, y compris des expressions régulières et des fonctions

J'ai fait un autre wrapper minimaliste avec seulement 20 lignes de code pour permettre de l'utiliser comme il se doit:

localStorage.set('myKey',{a:[1,2,5], b: 'ok'});
localStorage.has('myKey');   // --> true
localStorage.get('myKey');   // --> {a:[1,2,5], b: 'ok'}
localStorage.keys();         // --> ['myKey']
localStorage.remove('myKey');

https://github.com/zevero/simpleWebstorage

Pour les utilisateurs Typescript désireux de définir et d'obtenir des propriétés typées:

/**
 * Silly wrapper to be able to type the storage keys
 */
export class TypedStorage<T> {

    public removeItem(key: keyof T): void {
        localStorage.removeItem(key);
    }

    public getItem<K extends keyof T>(key: K): T[K] | null {
        const data: string | null =  localStorage.getItem(key);
        return JSON.parse(data);
    }

    public setItem<K extends keyof T>(key: K, value: T[K]): void {
        const data: string = JSON.stringify(value);
        localStorage.setItem(key, data);
    }
}

Exemple d'utilisation :

// write an interface for the storage
interface MyStore {
   age: number,
   name: string,
   address: {city:string}
}

const storage: TypedStorage<MyStore> = new TypedStorage<MyStore>();

storage.setItem("wrong key", ""); // error unknown key
storage.setItem("age", "hello"); // error, age should be number
storage.setItem("address", {city:"Here"}); // ok

const address: {city:string} = storage.getItem("address");

https://github.com/adrianmay/rhaboo est une couche de sucre localStorage qui vous permet d'écrire des choses comme ceci:

var store = Rhaboo.persistent('Some name');
store.write('count', store.count ? store.count+1 : 1);
store.write('somethingfancy', {
  one: ['man', 'went'],
  2: 'mow',
  went: [  2, { mow: ['a', 'meadow' ] }, {}  ]
});
store.somethingfancy.went[1].mow.write(1, 'lawn');

Il n'utilise pas JSON.stringify / parse car cela serait inexact et lent sur les gros objets. Au lieu de cela, chaque valeur de terminal a sa propre entrée localStorage.

Vous pouvez probablement deviner que je pourrais avoir quelque chose à voir avec le rhaboo.

Voici une version étendue du code posté par @danott

Il va également mettre en œuvre suppression valeur de localStorage et montre comment ajoute une couche getter et setter donc au lieu de

localstorage.setItem(preview, true)

tu peux écrire

config.preview = true

D'accord, c'était parti:

var PT=Storage.prototype

if (typeof PT._setItem >='u') PT._setItem = PT.setItem;
PT.setItem = function(key, value)
{
  if (typeof value >='u')//..ndefined
    this.removeItem(key)
  else
    this._setItem(key, JSON.stringify(value));
}

if (typeof PT._getItem >='u') PT._getItem = PT.getItem;
PT.getItem = function(key)
{  
  var ItemData = this._getItem(key)
  try
  {
    return JSON.parse(ItemData);
  }
  catch(e)
  {
    return ItemData;
  }
}

// Aliases for localStorage.set/getItem 
get =   localStorage.getItem.bind(localStorage)
set =   localStorage.setItem.bind(localStorage)

// Create ConfigWrapperObject
var config = {}

// Helper to create getter & setter
function configCreate(PropToAdd){
    Object.defineProperty( config, PropToAdd, {
      get: function ()      { return (  get(PropToAdd)      ) },
      set: function (val)   {           set(PropToAdd,  val ) }
    })
}
//------------------------------

// Usage Part
// Create properties
configCreate('preview')
configCreate('notification')
//...

// Config Data transfer
//set
config.preview = true

//get
config.preview

// delete
config.preview = undefined

Eh bien, vous pouvez supprimer la partie des alias .bind(...). Cependant je viens de le mettre car c'est vraiment bon de savoir à ce sujet. J'ai mis des heures à découvrir pourquoi un simple get = localStorage.getItem;ne marche pas

J'ai créé une chose qui ne casse pas les objets de stockage existants, mais crée un wrapper pour que vous puissiez faire ce que vous voulez. Le résultat est un objet normal, sans méthodes, avec accès comme n'importe quel objet.

La chose que j'ai faite.

Si vous voulez que 1 localStoragepropriété soit magique:

var prop = ObjectStorage(localStorage, 'prop');

Si vous en avez besoin de plusieurs:

var storage = ObjectStorage(localStorage, ['prop', 'more', 'props']);

Tout ce que vous faites propou les objets à l' intérieur storage seront automatiquement enregistrés localStorage. Vous jouez toujours avec un vrai objet, vous pouvez donc faire des trucs comme ça:

storage.data.list.push('more data');
storage.another.list.splice(1, 2, {another: 'object'});

Et chaque nouvel objet à l' intérieur d' un objet suivi sera automatiquement suivi.

Le très gros inconvénient: cela dépend Object.observe()donc le support du navigateur est très limité. Et il ne semble pas que cela arrivera bientôt pour Firefox ou Edge.

Vous ne pouvez pas stocker de valeur de clé sans Format de chaîne .

LocalStorage ne prend en charge que le format String pour la clé / valeur.

C'est pourquoi vous devez convertir vos données en chaîne quel qu'il soit Tableau ou Objet .

Pour stocker des données dans localStorage, commencez par les filtrer en utilisant la méthode JSON.stringify () .

var myObj = [{name:"test", time:"Date 2017-02-03T08:38:04.449Z"}];
localStorage.setItem('item', JSON.stringify(myObj));

Ensuite, lorsque vous souhaitez récupérer des données, vous devez à nouveau analyser la chaîne en objet.

var getObj = JSON.parse(localStorage.getItem('item'));

J'espère que cela aide.

Pour stocker un objet, vous pouvez créer des lettres que vous pouvez utiliser pour obtenir un objet d'une chaîne vers un objet (cela peut ne pas avoir de sens). Par exemple

var obj = {a: "lol", b: "A", c: "hello world"};
function saveObj (key){
    var j = "";
    for(var i in obj){
        j += (i+"|"+obj[i]+"~");
    }
    localStorage.setItem(key, j);
} // Saving Method
function getObj (key){
    var j = {};
    var k = localStorage.getItem(key).split("~");
    for(var l in k){
        var m = k[l].split("|");
        j[m[0]] = m[1];
    }
    return j;
}
saveObj("obj"); // undefined
getObj("obj"); // {a: "lol", b: "A", c: "hello world"}

Cette technique provoquera quelques problèmes si vous utilisez la lettre que vous avez utilisée pour diviser l'objet, et elle est également très expérimentale.

J'ai trouvé un moyen de le faire fonctionner avec des objets qui ont des références cycliques.

Faisons un objet avec des références cycliques.

obj = {
    L: {
        L: { v: 'lorem' },
        R: { v: 'ipsum' }
    },
    R: {
        L: { v: 'dolor' },
        R: {
            L: { v: 'sit' },
            R: { v: 'amet' }
        }
    }
}
obj.R.L.uncle = obj.L;
obj.R.R.uncle = obj.L;
obj.R.R.L.uncle = obj.R.L;
obj.R.R.R.uncle = obj.R.L;
obj.L.L.uncle = obj.R;
obj.L.R.uncle = obj.R;

Nous ne pouvons pas le faire JSON.stringifyici, à cause des références circulaires.

LOCALSTORAGE.CYCLICJSONa .stringifyet .parsecomme d'habitude JSON, mais fonctionne avec des objets avec des références circulaires. ("Works" signifie parse (stringify (obj)) et obj sont profondément égaux ET ont des ensembles identiques d '"égalités internes")

Mais nous pouvons simplement utiliser les raccourcis:

LOCALSTORAGE.setObject('latinUncles', obj)
recovered = LOCALSTORAGE.getObject('latinUncles')

Ensuite, recoveredsera "le même" à obj, dans le sens suivant:

[
obj.L.L.v === recovered.L.L.v,
obj.L.R.v === recovered.L.R.v,
obj.R.L.v === recovered.R.L.v,
obj.R.R.L.v === recovered.R.R.L.v,
obj.R.R.R.v === recovered.R.R.R.v,
obj.R.L.uncle === obj.L,
obj.R.R.uncle === obj.L,
obj.R.R.L.uncle === obj.R.L,
obj.R.R.R.uncle === obj.R.L,
obj.L.L.uncle === obj.R,
obj.L.R.uncle === obj.R,
recovered.R.L.uncle === recovered.L,
recovered.R.R.uncle === recovered.L,
recovered.R.R.L.uncle === recovered.R.L,
recovered.R.R.R.uncle === recovered.R.L,
recovered.L.L.uncle === recovered.R,
recovered.L.R.uncle === recovered.R
]

Voici l'implémentation de LOCALSTORAGE

LOCALSTORAGE = (function(){
  "use strict";
  var ignore = [Boolean, Date, Number, RegExp, String];
  function primitive(item){
    if (typeof item === 'object'){
      if (item === null) { return true; }
      for (var i=0; i<ignore.length; i++){
        if (item instanceof ignore[i]) { return true; }
      }
      return false;
    } else {
      return true;
    }
  }
  function infant(value){
    return Array.isArray(value) ? [] : {};
  }
  function decycleIntoForest(object, replacer) {
    if (typeof replacer !== 'function'){
      replacer = function(x){ return x; }
    }
    object = replacer(object);
    if (primitive(object)) return object;
    var objects = [object];
    var forest  = [infant(object)];
    var bucket  = new WeakMap(); // bucket = inverse of objects 
    bucket.set(object, 0);    
    function addToBucket(obj){
      var result = objects.length;
      objects.push(obj);
      bucket.set(obj, result);
      return result;
    }
    function isInBucket(obj){ return bucket.has(obj); }
    function processNode(source, target){
      Object.keys(source).forEach(function(key){
        var value = replacer(source[key]);
        if (primitive(value)){
          target[key] = {value: value};
        } else {
          var ptr;
          if (isInBucket(value)){
            ptr = bucket.get(value);
          } else {
            ptr = addToBucket(value);
            var newTree = infant(value);
            forest.push(newTree);
            processNode(value, newTree);
          }
          target[key] = {pointer: ptr};
        }
      });
    }
    processNode(object, forest[0]);
    return forest;
  };
  function deForestIntoCycle(forest) {
    var objects = [];
    var objectRequested = [];
    var todo = [];
    function processTree(idx) {
      if (idx in objects) return objects[idx];
      if (objectRequested[idx]) return null;
      objectRequested[idx] = true;
      var tree = forest[idx];
      var node = Array.isArray(tree) ? [] : {};
      for (var key in tree) {
        var o = tree[key];
        if ('pointer' in o) {
          var ptr = o.pointer;
          var value = processTree(ptr);
          if (value === null) {
            todo.push({
              node: node,
              key: key,
              idx: ptr
            });
          } else {
            node[key] = value;
          }
        } else {
          if ('value' in o) {
            node[key] = o.value;
          } else {
            throw new Error('unexpected')
          }
        }
      }
      objects[idx] = node;
      return node;
    }
    var result = processTree(0);
    for (var i = 0; i < todo.length; i++) {
      var item = todo[i];
      item.node[item.key] = objects[item.idx];
    }
    return result;
  };
  var console = {
    log: function(x){
      var the = document.getElementById('the');
      the.textContent = the.textContent + '\n' + x;
	},
	delimiter: function(){
      var the = document.getElementById('the');
      the.textContent = the.textContent +
		'\n*******************************************';
	}
  }
  function logCyclicObjectToConsole(root) {
    var cycleFree = decycleIntoForest(root);
    var shown = cycleFree.map(function(tree, idx) {
      return false;
    });
    var indentIncrement = 4;
    function showItem(nodeSlot, indent, label) {
      var leadingSpaces = ' '.repeat(indent);
      var leadingSpacesPlus = ' '.repeat(indent + indentIncrement);
      if (shown[nodeSlot]) {
        console.log(leadingSpaces + label + ' ... see above (object #' + nodeSlot + ')');
      } else {
        console.log(leadingSpaces + label + ' object#' + nodeSlot);
        var tree = cycleFree[nodeSlot];
        shown[nodeSlot] = true;
        Object.keys(tree).forEach(function(key) {
          var entry = tree[key];
          if ('value' in entry) {
            console.log(leadingSpacesPlus + key + ": " + entry.value);
          } else {
            if ('pointer' in entry) {
              showItem(entry.pointer, indent + indentIncrement, key);
            }
          }
        });
      }
    }
	console.delimiter();
    showItem(0, 0, 'root');
  };
  function stringify(obj){
    return JSON.stringify(decycleIntoForest(obj));
  }
  function parse(str){
    return deForestIntoCycle(JSON.parse(str));
  }
  var CYCLICJSON = {
    decycleIntoForest: decycleIntoForest,
    deForestIntoCycle : deForestIntoCycle,
    logCyclicObjectToConsole: logCyclicObjectToConsole,
    stringify : stringify,
    parse : parse
  }
  function setObject(name, object){
    var str = stringify(object);
    localStorage.setItem(name, str);
  }
  function getObject(name){
    var str = localStorage.getItem(name);
    if (str===null) return null;
    return parse(str);
  }
  return {
    CYCLICJSON : CYCLICJSON,
    setObject  : setObject,
    getObject  : getObject
  }
})();
obj = {
	L: {
		L: { v: 'lorem' },
		R: { v: 'ipsum' }
	},
	R: {
		L: { v: 'dolor' },
		R: {
			L: { v: 'sit' },
			R: { v: 'amet' }
		}
	}
}
obj.R.L.uncle = obj.L;
obj.R.R.uncle = obj.L;
obj.R.R.L.uncle = obj.R.L;
obj.R.R.R.uncle = obj.R.L;
obj.L.L.uncle = obj.R;
obj.L.R.uncle = obj.R;

// LOCALSTORAGE.setObject('latinUncles', obj)
// recovered = LOCALSTORAGE.getObject('latinUncles')
// localStorage not available inside fiddle ):
LOCALSTORAGE.CYCLICJSON.logCyclicObjectToConsole(obj)
putIntoLS = LOCALSTORAGE.CYCLICJSON.stringify(obj);
recovered = LOCALSTORAGE.CYCLICJSON.parse(putIntoLS);
LOCALSTORAGE.CYCLICJSON.logCyclicObjectToConsole(recovered);

var the = document.getElementById('the');
the.textContent = the.textContent + '\n\n' +
JSON.stringify(
[
obj.L.L.v === recovered.L.L.v,
obj.L.R.v === recovered.L.R.v,
obj.R.L.v === recovered.R.L.v,
obj.R.R.L.v === recovered.R.R.L.v,
obj.R.R.R.v === recovered.R.R.R.v,
obj.R.L.uncle === obj.L,
obj.R.R.uncle === obj.L,
obj.R.R.L.uncle === obj.R.L,
obj.R.R.R.uncle === obj.R.L,
obj.L.L.uncle === obj.R,
obj.L.R.uncle === obj.R,
recovered.R.L.uncle === recovered.L,
recovered.R.R.uncle === recovered.L,
recovered.R.R.L.uncle === recovered.R.L,
recovered.R.R.R.uncle === recovered.R.L,
recovered.L.L.uncle === recovered.R,
recovered.L.R.uncle === recovered.R
]
)

<pre id='the'></pre>

localStorage.setItem ('utilisateur', JSON.stringify (utilisateur));

Ensuite, pour le récupérer dans le magasin et le reconvertir en objet:

var user = JSON.parse (localStorage.getItem ('user'));

Si nous devons supprimer toutes les entrées du magasin, nous pouvons simplement faire:

localStorage.clear ();