Méthode d'implémentation de stockage local des informations JS (basée sur localStorage et userData)

本文实例讲述了 JS 实现本地存储信息的方法。分享给大家供大家参考，具体如下：

WEB 应用的快速发展，使得本地存储一些数据也成为一种重要的需求，实现的方案也有很多，最普通的就是 cookie 了，大家也经常都用，但是 cookie 的缺点是显而易见的，其他的方案比如：IE6以上的 userData，Firefox 下的 globalStorage，以及 Flash 的本地存储，除了 Flash 之外，其他的几个都有一些兼容性的问题。

sessionStorage 与 localStorage

Web Storage 实际上由两部分组成：sessionStorage 与 localStorage。

sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。

localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

userData

语法：

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

属性:

expires 设置或获取 userData behavior 保存数据的失效日期。
XMLDocument Obtient la référence de l'XML.

Méthode :

getAttribute() Obtient la valeur de l'attribut spécifié.
load(object) Charge les données de l'objet stockées dans la zone userData.
removeAttribute() Supprime l'attribut spécifié de l'objet.
save(object) Stocke les données de l'objet dans une zone de stockage userData.
setAttribute() Définit la valeur de l'attribut spécifié.

localStorage

Méthode :

localStorage.getItem(key): Obtient la valeur stockée localement pour la clé spécifiée
localStorage.setItem(key,value)： Stocke la valeur dans le champ key
localStorage.removeItem(key): Supprime la valeur stockée localement pour la clé spécifiée

Encapsulation

localData = {
  hname:location.hostname&63;location.hostname:'localStatus',
  ;window.localStorage&63;true:false,
  dataDom:null,
  initDom:function(){ //Initialiser userData
   if(!this.dataDom){
    try{
     this.dataDom = document.createElement('input');//Ici, un élément input caché est utilisé
     this.dataDom.type = 'hidden';
     this.dataDom.style.display = "none";
     this.dataDom.addBehavior('#default#userData');//C'est la syntaxe de userData
     document.body.appendChild(this.dataDom);
     var exDate = new Date();
     exDate = exDate.getDate();+30;
     this.dataDom.expires = exDate.toUTCString();//Définir l'heure d'expiration
    }
     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);
    }
   }
  }
}

La méthode d'utilisation est simple, cette section set, get, remove suffit.

La section impliquant le code demo est la suivante :

<script type="text/javascript">
(function() {
  window.localData = {
    hname : location.hostname &63; location.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>

Il existe une technique très utile pour empêcher la fermeture de la page, afficher une boîte de dialogue de confirmation de fermeture de page, voici un exemple de code :

window.onbeforeunload = function() {
  if (!canLeavePage()) {
    return ('Confirmez-vous que vous souhaitez quitter cette page ? Les données non enregistrées seront perdues !');
  }
};

Les lecteurs intéressés par d'autres contenus relatifs à JavaScript peuvent consulter les sujets spéciaux de ce site : <Tutoriel d'entrée en matière sur les objets orientés en JavaScript>, <Résumé des techniques de recherche en JavaScript>, <Résumé des techniques de structures de données et d'algorithmes en JavaScript>, <Résumé des techniques de manipulation JSON en JavaScript>, <Résumé des techniques de débogage des erreurs en JavaScript> et <Résumé des techniques d'opérations mathématiques en JavaScript>.

J'espère que ce tutoriel peut aider à la conception de programmes JavaScript.

Déclaration : le contenu de cet article est hébergé sur Internet, la propriété intellectuelle appartient aux auteurs, le contenu est自发贡献 par les utilisateurs d'Internet et téléversé, le site Web ne détient pas de droits de propriété, n'a pas été traité par l'éditeur humain et n'assume pas de responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation et fournir des preuves. Une fois vérifié, le site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)