I valori persistenti nell'oggetto JavaScript attraverso l'aggiornamento del browser

Ho creato un oggetto JavaScript.I valori persistenti nell'oggetto JavaScript attraverso l'aggiornamento del browser

var myObj = {};

Ora che l'utente gioca con l'applicazione, assegniamo alcuni valori a questo oggetto.

myObj['Name'] = 'Mr. Gates'; 
myObj['Age'] = 58; 

... 
... 
... 
myObj['Role'] = 'CEO';

Ma ogni volta che l'aggiornamento della pagina, l'oggetto perde i suoi valori.

C'è un modo per utilizzare HTML 5 \ o qualsiasi altra tecnica per mantenere questi valori attraverso l'aggiornamento della pagina.

fonte

2014-04-17 SharpCoder

che tutta una questione di biscotto !!! –

Nota a margine: un altro modo per scrivere 'obj ['Nome']' è 'obj.Name'. Finché il nome della proprietà soddisfa i requisiti di un nome identificatore JavaScript (non può avere spazi o altri caratteri, deve iniziare con una lettera, ecc.) È possibile utilizzare la notazione dot. Per i nomi di proprietà che contengono spazi, ecc. O che iniziano con qualcosa di diverso da una lettera, è necessario utilizzare la notazione tra parentesi. –

Sì, sono disponibili due opzioni principali:

Uso di un cookie. I cookie sono facili da impostare da JavaScript, ma un po 'di dolore da leggere. Hai detto che stai usando jQuery; ci sono un paio di plug-in jQuery che rendono i cookie molto più semplici, se cerchi "plugin jquery cookie" li troverai.
Utilizzo di web storage, che è supported by all major browsers, even IE8. Hai due possibilità: la memorizzazione "Session" che dura solo per questa "sessione" e "locale", che persiste fino a quando l'utente non lo cancella o il browser decide che ha bisogno di quella stanza per qualcos'altro.

Questa seconda opzione è abbastanza facile da usare, è possibile memorizzare le cose usando le stringhe in formato JSON (l'oggetto JSON è anche supported by all major browsers):

Conservazione del oggetto:

localStorage.yourObject = JSON.stringify(obj);

Recupero il tuo oggetto (ad esempio, al caricamento della pagina) o un oggetto vuoto se non ne è stato memorizzato nessuno:

obj = JSON.parse(localStorage.yourObject || "{}");

In quanto sopra, localStorage è una variabile (e l'implementazione sottostante) fornita dal browser per l'archiviazione locale. Potresti usare sessionStorage invece se vuoi l'archiviazione di sessione.

Ecco un esempio completo di archiviazione locale: Live Copy

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<meta charset=utf-8 /> 
<title>Local Storage</title> 
</head> 
<body> 
    <label><code>Name</code> property for our object: 
    <input type="text" id="txtName"> 
    </label> 
    <script> 
    (function() { 
     var txtName = $("#txtName"); 
     var obj = JSON.parse(localStorage.yourObject || '{"Name": ""}'); 
     txtName.val(obj.Name); 
     // This is obviously hyperactive: 
     txtName.on("change keypress keyup blur paste click", function() { 
     obj.Name = txtName.val(); 
     localStorage.yourObject = JSON.stringify(obj); 
     }); 
    })(); 
    </script> 
</body> 
</html>

fonte

2014-04-17 07:53:29

I valori persistenti nell'oggetto JavaScript attraverso l'aggiornamento del browser

risposta

Problemi correlati