Méthode JS pour implémenter le stockage local des informations (basé sur localStorage et userData)

Cet article présente principalement la méthode JS pour implémenter le stockage local des informations. Il implémente la fonction de stockage local basée sur localStorage et userData.Les amis dans le besoin peuvent s'y référer

L'exemple de cet article décrit le méthode de JS pour implémenter le stockage local des informations. Partagez-le avec tout le monde pour référence, les détails sont les suivants :

Avec le développement rapide des applications WEB, le stockage local de certaines données est devenu une exigence importante, et il existe de nombreuses solutions de mise en œuvre la plus courante. est des cookies. Tout le monde Il est souvent utilisé, mais les défauts des cookies sont évidents. D'autres solutions incluent : userData dans IE6 et supérieur, globalStorage dans Firefox et le stockage local dans Flash, les autres ont des problèmes de compatibilité.

sessionStorage et localStorage

Le stockage Web se compose en fait de deux parties : sessionStorage et localStorage.

sessionStorage est utilisé pour stocker localement les données dans une session. Ces données ne sont accessibles que par les pages de la même session et les données seront détruites à la fin de la session. Par conséquent, sessionStorage n'est pas un stockage local persistant, mais uniquement un stockage au niveau de la session.

localStorage est utilisé pour le stockage local persistant, à moins que les données ne soient activement supprimées, les données n'expireront jamais.

userData

Syntaxe :

XML c10cb54f41875012702ac9704b067145
HTML 50fb392f5c9f23e8d8c1b6195482d7a4
Objet de script .style. behavior = "url('#default#userData')"
object .addBehavior ("#default#userData")

Attribut :

expires définit ou obtient la date d'expiration du comportement userData des données enregistrées.
XMLDocument Obtient une référence à XML.

Méthode :

getAttribute() Obtenez la valeur d'attribut spécifiée.
load(object) Chargez les données d'objet stockées à partir de la zone de stockage userData.
removeAttribute() Supprimer l'attribut spécifié de l'objet.
save(object) Stockez les données d'objet dans un magasin userData.
setAttribute() Définissez la valeur d'attribut spécifiée.

localStorage

Méthode :

localStorage.getItem(key):Obtenir la clé spécifiée localement stockage La valeur
localStorage.setItem(key,value)：Stocker la valeur dans le champ clé
localStorage.removeItem(key):Supprimer la valeur stockée localement de la clé spécifiée

Package

localData = {
  hname:location.hostname?location.hostname:'localStatus',
  isLocalStorage:window.localStorage?true:false,
  dataDom:null,
  initDom:function(){ //初始化userData
   if(!this.dataDom){
    try{
     this.dataDom = document.createElement('input');//这里使用hidden的input元素
     this.dataDom.type = 'hidden';
     this.dataDom.style.display = "none";
     this.dataDom.addBehavior('#default#userData');//这是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);
   }else{
    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);
   }else{
    if(this.initDom()){
     this.dataDom.load(this.hname);
     return this.dataDom.getAttribute(key);
    }
   }
  },
  remove:function(key){
   if(this.isLocalStorage){
    localStorage.removeItem(key);
   }else{
    if(this.initDom()){
     this.dataDom.load(this.hname);
     this.dataDom.removeAttribute(key);
     this.dataDom.save(this.hname)
    }
   }
  }
}

La méthode d'utilisation est très simple, il suffit de définir, d'obtenir et de supprimer dans cette section.

Le code de démonstration impliqué est le suivant :

<script type="text/javascript">
(function() {
  window.localData = {
    hname : location.hostname ? location.hostname : &#39;localStatus&#39;,
    isLocalStorage : window.localStorage ? true : false,
    dataDom : null,
    initDom : function() {
      if (!this.dataDom) {
        try {
          this.dataDom = document.createElement(&#39;input&#39;);
          this.dataDom.type = &#39;hidden&#39;;
          this.dataDom.style.display = "none";
          this.dataDom.addBehavior(&#39;#default#userData&#39;);
          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);
      } else {
        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);
      } else {
        if (this.initDom()) {
          this.dataDom.load(this.hname);
          return this.dataDom.getAttribute(key);
        }
      }
    },
    remove : function(key) {
      if (this.isLocalStorage) {
        localStorage.removeItem(key);
      } else {
        if (this.initDom()) {
          this.dataDom.load(this.hname);
          this.dataDom.removeAttribute(key);
          this.dataDom.save(this.hname)
        }
      }
    }
  };
  var text = document.getElementById(&#39;localDataHook&#39;);
  var btn = document.getElementById(&#39;clearBtnHook&#39;);
  window.onbeforeunload = function() {
    localData.set(&#39;beiyuuData&#39;, text.value);
  };
  btn.onclick = function() {
    localData.remove(&#39;beiyuuData&#39;);
    text.value = &#39;&#39;
  };
  if (localData.get(&#39;beiyuuData&#39;)) {
    text.value = localData.get(&#39;beiyuuData&#39;);
  }
})();
</script>

Il existe également une technologie plus pratique, bloquant La page est fermée et une boîte pop-up permettant de fermer la page s'affiche. Le code de référence est le suivant :

window.onbeforeunload = function() {
  if (!canLeavePage()) {
    return ('确认离开当前页面吗？未保存的数据将会丢失！');
  }

J'espère que cet article vous sera utile. tout le monde dans la programmation JavaScript.

Pour plus de méthodes JS pour implémenter le stockage local des informations (basé sur localStorage et userData), veuillez faire attention au site Web PHP chinois !