Métodos para implementar el almacenamiento local de información en JS (basado en localStorage y userData)

Este artículo describe cómo implementar métodos de almacenamiento local en JS. Comparto con todos para referencia, como se muestra a continuación:

El rápido desarrollo de aplicaciones WEB ha hecho que el almacenamiento local de datos sea una necesidad importante, hay muchos métodos para lograrlo, el más común es el cookie, que todos usamos a menudo, pero los defectos del cookie son evidentes, otras soluciones como: IE6Los userData, globalStorage en Firefox y el almacenamiento local de Flash, además del Flash, tienen problemas de compatibilidad con otros.

sessionStorage y localStorage

Web Storage realmente consta de dos partes: sessionStorage y localStorage.

sessionStorage se utiliza para almacenar datos locales en una sesión (sesión), estos datos solo pueden ser accedidos en las páginas de la misma sesión y se eliminan cuando finaliza la sesión. Por lo tanto, sessionStorage no es un almacenamiento local persistente, sino solo un almacenamiento a nivel de sesión.

localStorage se utiliza para almacenamiento local persistente, a menos que se elimine explícitamente los datos, estos nunca expirarán.

userData

Sintaxis:

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")

Atributo:

expires establece o obtiene la fecha de expiración de la información guardada en userData behavior.
XMLDocument obtener la referencia de XML.

método:

getAttribute() obtener el valor de la propiedad especificada.
load(object) cargar los datos almacenados del objeto desde la zona de almacenamiento userData.
removeAttribute() eliminar la propiedad específica del objeto.
save(object) almacenar los datos del objeto en una zona de almacenamiento userData.
setAttribute() establecer el valor de la propiedad especificada.

localStorage

método:

localStorage.getItem(key): obtener el valor de almacenamiento local específico del key
localStorage.setItem(key,value)： almacenar value en el campo key
localStorage.removeItem(key): eliminar el valor de almacenamiento local específico del key

encapsular

localData = {
  hname:ubicación.del.hostname &63;ubicación.del.hostname:'localStatus',
  ;ubicación.del.hostname &63;true:false,
  dataDom:null,
  initDom:function(){ //inicializar userData
   if(!this.dataDom){
    try{
     this.dataDom = document.createElement('input');//Aquí se utiliza el elemento de entrada oculto
     this.dataDom.type = 'hidden';
     this.dataDom.style.display = "none";
     this.dataDom.addBehavior('#default#userData');//Esta es la sintaxis de userData
     document.body.appendChild(this.dataDom);
     var exDate = new Date();
     exDate = exDate.getDate();+30;
     this.dataDom.expires = exDate.toUTCString();//establecer tiempo de expiración
    }
     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);
    }
   }
  }
}

El método de uso es muy simple, esta sección set, get, remove sería suficiente.

El código de demostración involucrado es el siguiente:

<script tipo="text/javascript">
(function() {
  window.localData = {
    hname : ubicación.del.hostname &63; ubicación.del.hostname : 'localStatus',
    isLocalStorage : window.localStorage63; 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>

Hay una técnica bastante útil, que es evitar que la página se cierre y mostrar un cuadro de diálogo de confirmación de cierre de página. A continuación, se muestra el código de referencia:

window.onbeforeunload = function() {
  if (!canLeavePage()) {
    return ('¿Está seguro de salir de esta página? Los datos no guardados se perderán!');
  }
};

Los lectores interesados en más contenido relacionado con JavaScript pueden consultar la sección especial de este sitio: 'Tutoriales de introducción a la programación orientada a objetos en JavaScript', 'Resumen de técnicas de búsqueda en JavaScript', 'Resumen de técnicas de estructuras de datos y algoritmos en JavaScript', 'Resumen de técnicas de operaciones JSON en JavaScript', 'Resumen de técnicas de errores y depuración en JavaScript' y 'Resumen de técnicas de operaciones matemáticas en JavaScript'.

Espero que lo dicho en este artículo sea útil para todos en la programación de JavaScript.

Declaración: El contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha realizado un procesamiento editorial manual y no asume la responsabilidad legal relevante. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplaza # con @ para denunciar, y proporciona pruebas relacionadas. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.)