web-dev-qa-db-fra.com

Paramétrer et obtenir un stockage local avec jQuery

J'essaie localStorage et j'essaie d'extraire du texte d'un div et de le stocker dans localStorage. Toutefois, il le définit comme [objet Object] et renvoie [objet Object]. Pourquoi cela arrive-t-il?

localStorage.content = $('#test').html('Test');

$('#test').html(localStorage.content);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="test"></div>
javascriptjquerylocal-storage
18
werewr

Vous avez dit que vous essayez de obtenir le texte d'un div et le stocker sur un stockage local.

Remarque: le texte et le code HTML sont différents. Dans la question, vous avez mentionné le texte. html() retournera un contenu HTML comme <a>example</a>. si vous voulez obtenir du contenu Texte, vous devez utiliser text() au lieu de html(), le résultat sera example au lieu de <a>example<a>. Quoi qu'il en soit, j'utilise votre terminologie, que ce soit texte.

Étape 1: récupère le texte de div.

ce que vous avez fait n’est pas d’obtenir le texte de div mais de le définir comme div.

$('#test').html("Test");

met actuellement le texte à div et le résultat sera un objet jQuery. C'est pourquoi il le définit comme [object Object].

Pour obtenir le texte, vous devez écrire comme ceci
$('#test').html();

Cela retournera une chaîne et non un objet, le résultat sera donc Test dans votre cas.

Étape 2: définissez-le sur le stockage local.

Votre approche est correcte et vous pouvez l'écrire comme

localStorage.key=value

Mais l’approche privilégiée est

localStorage.setItem(key,value); pour définir

localStorage.getItem(key); pour obtenir.

la clé et la valeur doivent être des chaînes.

alors dans votre code de contexte deviendra

$('#test').html("Test");
localStorage.content = $('#test').html();
$('#test').html(localStorage.content);

Mais je ne trouve aucune signification dans votre code. Parce que vous voulez obtenir le texte de div et le stocker sur un stockage local. Et encore une fois, vous lisez la même chose à partir du stockage local et réglez-le sur div. juste comme a=10; b=a; a=b;

Si vous rencontrez d'autres problèmes, veuillez mettre à jour votre question en conséquence.

26
Tintu C Raju

Utilisez setItem et getItem si vous souhaitez écrire des chaînes simples dans localStorage. De plus, vous devriez utiliser text() si c'est le texte que vous cherchez, sinon vous obtiendrez le code HTML complet sous forme de chaîne.

Échantillon utilisant .text ()

// get the text
var text = $('#test').text();

// set the item in localStorage
localStorage.setItem('test', text);

// alert the value to check if we got it
alert(localStorage.getItem('test'));

JSFiddle: https://jsfiddle.net/f3zLa3zc/

Stocker le HTML lui-même

// get html
var html = $('#test')[0].outerHTML;

// set localstorage
localStorage.setItem('htmltest', html);

// test if it works
alert(localStorage.getItem('htmltest'));

JSFiddle:
https://jsfiddle.net/psfL82q3/1/

Mise à jour sur le commentaire de l'utilisateur

Un utilisateur veut mettre à jour le localStorage lorsque le contenu de la div change. Comme il est difficile de savoir comment le contenu de la div change (ajax, autre méthode?), contenteditable et blur() sont utilisés pour modifier le contenu de la div et écraser l'ancienne entrée localStorage.

// get the text
var text = $('#test').text();

// set the item in localStorage
localStorage.setItem('test', text);

// bind text to 'blur' event for div
$('#test').on('blur', function() {

    // check the new text
    var newText = $(this).text();

    // overwrite the old text
    localStorage.setItem('test', newText);

    // test if it works
    alert(localStorage.getItem('test'));

});

Si nous utilisions ajax, nous activerions plutôt la fonction via la fonction responsable de la mise à jour du contenu.

JSFiddle:
https://jsfiddle.net/g1b8m1fc/

23
Tommie

Le localStorage ne peut stocker que le contenu d'une chaîne et vous essayez de stocker un objet jQuery puisque html(htmlString) renvoie un objet jQuery.

Vous devez définir le contenu de la chaîne au lieu d'un objet. Et utilisez la méthode setItem pour ajouter des données et getItem pour obtenir des données.

window.localStorage.setItem('content', 'Test');
$('#test').html(window.localStorage.getItem('content'));
3
Pranav C Balan