Metodo di implementazione del salvataggio delle informazioni locali in JS (basato su localStorage e userData)

Questo articolo descrive l'esempio di implementazione del metodo di archiviazione locale delle informazioni in JS. Condivido questo con tutti voi per riferimento, come segue:

Il rapido sviluppo delle applicazioni WEB ha reso necessario archiviare alcuni dati localmente, e ci sono molte soluzioni disponibili, la più comune è il cookie, che tutti usiamo spesso, ma i difetti del cookie sono evidenti. Altre soluzioni come: userData sopra IE6, globalStorage sotto Firefox e archiviazione locale di Flash, eccetto Flash, hanno problemi di compatibilità.

sessionStorage e localStorage

Web Storage è composto effettivamente da due parti: sessionStorage e localStorage.

sessionStorage è utilizzato per archiviare i dati locali di una sessione (sessione), questi dati possono essere acceduti solo nelle pagine della stessa sessione e vengono distrutti alla fine della sessione. Pertanto, sessionStorage non è un tipo di archiviazione locale persistente, ma solo una archiviazione di livello di sessione.

localStorage è utilizzato per l'archiviazione locale persistente, a meno che i dati non vengano eliminati attivamente, i dati non scadranno mai.

userData

Sintassi:

XML <Prefix: CustomTag ID=sID STYLE="behavior:url('#default#userData')" />
HTML <ELEMENT STYLE="behavior:url('#default#userData')" ID=sID>
Scripting object .style.behavior = "url('#default#userData')"
object .addBehavior("#default#userData")

Proprietà:

expires Imposta o ottieni la data di scadenza per il salvataggio dei dati nella behavior userData.
XMLDocument Ottieni il riferimento dell'XML.

Metodo:

getAttribute() Ottieni il valore dell'attributo specificato.
load(object) Carica i dati dell'oggetto archiviati nella sezione userData.
removeAttribute() Rimuove l'attributo specificato dell'oggetto.
save(object) Salva i dati dell'oggetto in una sezione di archiviazione userData.
setAttribute() Imposta il valore dell'attributo specificato.

localStorage

Metodo:

localStorage.getItem(key): Ottieni il valore di archiviazione locale specificato per la chiave
localStorage.setItem(key,value)： Salva il valore value nel campo key
localStorage.removeItem(key): Elimina il valore di archiviazione locale specificato per la chiave

Encapsulation

localData = {
  hname:location.hostname?location.hostname:'localStatus',
  isLocalStorage:window.localStorage?true:false,
  dataDom:null,
  initDom:function(){ // Inizializza userData
   if(!this.dataDom){
    try{
     this.dataDom = document.createElement('input'); // Qui viene utilizzato un elemento input nascosto
     this.dataDom.type = 'hidden';
     this.dataDom.style.display = "none";
     this.dataDom.addBehavior('#default#userData'); // Questo è il sintass del userData
     document.body.appendChild(this.dataDom);
     var exDate = new Date();
     exDate = exDate.getDate()+30;
     this.dataDom.expires = exDate.toUTCString(); // Imposta l'ora di scadenza
    }
     return false;
    }
   }
   return true;
  },
  set:function(key,value){
   if(this.isLocalStorage){
    window.localStorage.setItem(key,value);
   }
    if(this.initDom()){
     this.dataDom.load(this.hname);
     this.dataDom.setAttribute(key,value);
     this.dataDom.save(this.hname);
    }
   }
  },
  get:function(key){
   if(this.isLocalStorage){
    return window.localStorage.getItem(key);
   }
    if(this.initDom()){
     this.dataDom.load(this.hname);
     return this.dataDom.getAttribute(key);
    }
   }
  },
  remove:function(key){
   if(this.isLocalStorage){
    localStorage.removeItem(key);
   }
    if(this.initDom()){
     this.dataDom.load(this.hname);
     this.dataDom.removeAttribute(key);
     this.dataDom.save(this.hname);
    }
   }
  }
}

L'uso è molto semplice, è sufficiente seguire questo set, get, remove.

Ecco il codice demo coinvolto:

<script type="text/javascript">
(function() {
  window.localData = {
    hname : location.hostname ? location.hostname : 'localStatus',
    isLocalStorage : window.localStorage ? true : false,
    dataDom : null,
    initDom : function() {
      if (!this.dataDom) {
        try {
          this.dataDom = document.createElement('input');
          this.dataDom.type = 'hidden';
          this.dataDom.style.display = "none";
          this.dataDom.addBehavior('#default#userData');
          document.body.appendChild(this.dataDom);
          var exDate = new Date();
          exDate = exDate.getDate() + 30;
          this.dataDom.expires = exDate.toUTCString();
        } catch (ex) {
          return false;
        }
      }
      return true;
    },
    set : function(key, value) {
      if (this.isLocalStorage) {
        window.localStorage.setItem(key, value);
      }
        if (this.initDom()) {
          this.dataDom.load(this.hname);
          this.dataDom.setAttribute(key, value);
          this.dataDom.save(this.hname);
        }
      }
    },
    get : function(key) {
      if (this.isLocalStorage) {
        return window.localStorage.getItem(key);
      }
        if (this.initDom()) {
          this.dataDom.load(this.hname);
          return this.dataDom.getAttribute(key);
        }
      }
    },
    remove : function(key) {
      if (this.isLocalStorage) {
        localStorage.removeItem(key);
      }
        if (this.initDom()) {
          this.dataDom.load(this.hname);
          this.dataDom.removeAttribute(key);
          this.dataDom.save(this.hname);
        }
      }
    }
  };
  var text = document.getElementById('localDataHook');
  var btn = document.getElementById('clearBtnHook');
  window.onbeforeunload = function() {
    localData.set('beiyuuData', text.value);
  };
  btn.onclick = function() {
    localData.remove('beiyuuData');
    text.value = ''
  };
  if (localData.get('beiyuuData')) {
    text.value = localData.get('beiyuuData');
  }
})();
</script>

Esiste una tecnica molto utile per impedire la chiusura della pagina, mostrando una finestra di conferma di chiusura della pagina. Ecco un esempio di codice:

window.onbeforeunload = function() {
  if (!canLeavePage()) {
    Confermi di voler lasciare la pagina corrente? I dati non salvati saranno persi!
  }
};

Per chi è interessato a ulteriori contenuti su JavaScript, è possibile consultare le sezioni speciali del nostro sito: 'Tutorial di introduzione all'orientamento oggetti JavaScript', 'Concetti di ricerca algoritmi JavaScript', 'Concetti di strutture dati e algoritmi JavaScript', 'Concetti di operazioni JSON in JavaScript', 'Concetti di debug e errori JavaScript' e 'Concetti di operazioni matematiche JavaScript'.

Spero che il presente articolo possa essere di aiuto a tutti nella progettazione di programmi JavaScript.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, di proprietà del rispettivo autore. Il contenuto è stato contribuito e caricato volontariamente dagli utenti di Internet, il sito web non detiene i diritti di proprietà, non ha effettuato alcuna modifica editoriale e non assume alcuna responsabilità legale correlata. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una email a: notice#oldtoolbag.com (al momento dell'invio dell'email, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, il sito web eliminerà immediatamente il contenuto sospetto di violazione del copyright.