JS-Methode zur Implementierung der lokalen Speicherung von Informationen (basierend auf localStorage und userData)-js-Tutorial-php.cn

JS-Methode zur Implementierung der lokalen Speicherung von Informationen (basierend auf localStorage und userData)

高洛峰

Freigeben： 2017-02-20 16:34:05

Original

1443 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Methode von JS zur Implementierung der lokalen Speicherung von Informationen vor. Er implementiert die lokale Speicherfunktion basierend auf localStorage und userData. Freunde in Not können darauf verweisen.

Das Beispiel dieses Artikels beschreibt Methode von JS zur Implementierung der lokalen Speicherung von Informationen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Mit der schnellen Entwicklung von WEB-Anwendungen ist die lokale Speicherung einiger Daten zu einer wichtigen Anforderung geworden, und es gibt viele Implementierungslösungen Cookies werden häufig verwendet, aber die Nachteile von Cookies liegen auf der Hand: userData in IE6 und höher, globalStorage in Firefox und lokaler Speicher in Flash.

sessionStorage und localStorage

Web Storage besteht eigentlich aus zwei Teilen: sessionStorage und localStorage.

sessionStorage wird zum lokalen Speichern von Daten in einer Sitzung verwendet. Auf diese Daten kann nur von Seiten in derselben Sitzung zugegriffen werden und die Daten werden zerstört, wenn die Sitzung endet. Daher handelt es sich bei sessionStorage nicht um einen dauerhaften lokalen Speicher, sondern nur um einen Speicher auf Sitzungsebene.

localStorage wird für die dauerhafte lokale Speicherung verwendet, sofern die Daten nicht aktiv gelöscht werden.

userData

Syntax:

XML
HTML
Skriptobjekt .style. behavior = "url('#default#userData')"
object .addBehavior ("#default#userData")

Attribut:

expires legt das Ablaufdatum der gespeicherten Daten für das Benutzerdatenverhalten fest oder ruft es ab.
XMLDocument Ruft einen Verweis auf XML ab.

Methode:

getAttribute() Den angegebenen Attributwert abrufen.
load(object) Laden Sie die gespeicherten Objektdaten aus dem userData-Speicherbereich.
removeAttribute() Entfernen Sie das angegebene Attribut des Objekts.
save(object) Objektdaten in einem userData-Speicher speichern.
setAttribute() Legen Sie den angegebenen Attributwert fest.

localStorage

Methode:

localStorage.getItem(key):Den angegebenen Schlüssel lokal abrufen storage Der Wert
localStorage.setItem(key,value)：Speichern Sie den Wert im Schlüsselfeld
localStorage.removeItem(key):Löschen Sie den lokal gespeicherten Wert des angegebenen Schlüssels

Paket

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

Nach dem Login kopieren

Die Verwendungsmethode ist sehr einfach, einfach in diesem Abschnitt festlegen, abrufen und entfernen.

Der beteiligte Democode lautet wie folgt:

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

Nach dem Login kopieren

Es gibt auch eine praktischere Technologie, das Blockieren Die Seite wird geschlossen und ein Popup-Fenster zum Schließen der Seite wird wie folgt angezeigt:

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

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel hilfreich ist Jeder in der JavaScript-Programmierung.

Weitere JS-Methoden zur Implementierung der lokalen Speicherung von Informationen (basierend auf localStorage und userData) finden Sie auf der chinesischen PHP-Website!