web-dev-qa-db-fra.com

Enregistrer les données sur le stockage local

J'essaie de définir un ensemble de variables dans le stockage local, mais la fonction ne s'exécute pas. J'ai essayé d'obtenir la valeur, mais sans succès, comment puis-je enregistrer des champs dans le stockage local?

function setPerson(){
var person = { 'name': getElementById('name'), 'photo': getElementById('photo')};

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

HTML Dans le HTML, je viens de champs qui mettent des valeurs dans des balises et elles sont remplies, mais lorsque j'essaie de les récupérer et de les sauvegarder, rien ne se passe ...

J'ai aussi essayé de sortir des valeurs fixes, puis l'alerte est affichée, mais elle ne dit que l'objet et pas la valeur.

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');
alert('retrievedObject: ', JSON.parse(retrievedObject));;
javascriptjquerylocal-storage
13
user3637210

Vous pouvez utiliser localStorage comme ceci:

// Retrieve your data from locaStorage
var saveData = JSON.parse(localStorage.saveData || null) || {};

// Store your data.
function saveStuff(obj) {
  saveData.obj = obj;
  // saveData.foo = foo;
  saveData.time = new Date().getTime();
  localStorage.saveData = JSON.stringify(saveData);
}

// Do something with your data.
function loadStuff() {
  return saveData.obj || "default";
}

jsFiddle

15
Jonathan

Tout d'abord, vous devez utiliser console au lieu de alert.

Et, si vous voulez utiliser l'objet récupéré quelque part, vous feriez mieux de le stocker dans une variable:

var testObject = { 'one': 1, 'two': 2, 'three': 3 };
localStorage.setItem('testObject', JSON.stringify(testObject));
var retrievedObject = JSON.parse(localStorage.getItem('testObject'));
console.log('retrievedObject: ', retrievedObject);
3
advncd

W3Schools vous donne des exemples détaillés sur la façon de travailler avec le stockage HTML et local.

w3Schools - Localstorage

1
Mensur Grišević

getElementById doit être remplacé par

    document.getElementById

De plus, cela vous permettra d'obtenir l'intégralité de l'élément DOM. Je suppose que vous voulez ce qui est à l'intérieur de la balise, donc je dirais utiliser 

    document.getElementById('name').innerHTML

au lieu de cela, le simple fait de référencer l’élément DOM vous donnera une erreur de structure circulaire lorsque vous tenterez de le stringifier.

Exemple de code que j'ai confirmé fonctionne:

<html>
<head>
</head>
<body>
<p id="name">Hello</p>
<p id="photo">photo</p>
<script>

function setPerson(){
var person = { 'name': document.getElementById('name').innerHTML, 'photo':    document.getElementById('photo').innerHTML};

// Put the object into storage
localStorage.setItem('person', JSON.stringify(person));
}
setPerson()
</script>
</body>
</html>
0
VSarin

Le problème est que getElementById renvoie un élément HTML, qui est un objet. 

Ensuite, JSON.stringify tentera d’itérer ses propres propriétés.

Mais probablement, ils n'en ont pas (sauf si vous les avez ajoutés manuellement).

Puisque vous dites que ce sont des champs, vous pouvez essayer de sauvegarder sa value à la place:

var person = {
    name: document.getElementById('name').value,
    photo: document.getElementById('photo').value
};
0
Oriol