Methode zur Implementierung der lokalen Speicherung von Informationen in JS (basierend auf localStorage und 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 Gibt den Bezug auf das XML zurück.

Methode:

getAttribute() Gibt den angegebenen Attributwert zurück.
load(object) Lädt die gespeicherten Objektdateien aus dem userData-Speicherbereich.
removeAttribute() Entfernt das angegebene Attribut des Objekts.
save(object) Speichert die Objektdatei in einem userData-Speicherbereich.
setAttribute() Setzt den angegebenen Attributwert.

localStorage

Methode:

localStorage.getItem(key):Abrufen des Wertes der angegebenen key aus dem lokalen Speicher
localStorage.setItem(key,value)：Speichern des Wertes value im Feld key
localStorage.removeItem(key):Löschen des Wertes der angegebenen key aus dem lokalen Speicher

Verpacken

localData = {
  hname:location.hostname&63;location.hostname:'localStatus',
  ;window.localStorage&63;true:false,
  dataDom:null,
  initDom:function(){ //Initialisiere userData
   if(!this.dataDom){
    try{
     this.dataDom = document.createElement('input');//Hier wird ein verstecktes input-Element verwendet
     this.dataDom.type = 'hidden';
     this.dataDom.style.display = "none";
     this.dataDom.addBehavior('#default#userData');//Dies ist die Syntax von userData
     document.body.appendChild(this.dataDom);
     var exDate = new Date();
     exDate = exDate.getDate();+30;
     this.dataDom.expires = exDate.toUTCString();//Setzen Sie das Ablaufdatum
    }
     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);
    }
   }
  }
}

Die Verwendung ist sehr einfach, diesset, get und remove aus diesem Abschnitt.

In diesem Abschnitt sind die Demo-Code-Beispiele wie folgt:

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

Eine sehr nützliche Technik, um das Schließen der Seite zu verhindern und ein Bestätigungsdialogfeld anzuzeigen, ist die folgende Referenzcode:

window.onbeforeunload = function() {
  if (!canLeavePage()) {
    return ('Sind Sie sicher, dass Sie die aktuelle Seite verlassen möchten? Nicht gespeicherte Daten gehen verloren!');
  }
};

Interessierte Leser, die mehr über JavaScript erfahren möchten, können die Themen dieser Website besuchen: 'Einführung in die objektorientierte Programmierung mit JavaScript', 'Zusammenfassung der Suchalgorithmen in JavaScript', 'Zusammenfassung der Datenstrukturen und Algorithmen in JavaScript', 'Zusammenfassung der json-Operationen in JavaScript', 'Zusammenfassung der Fehlerbehebung und Debugging-Techniken in JavaScript' und 'Zusammenfassung der mathematischen Operationen in JavaScript'.

Ich hoffe, dass die in diesem Artikel beschriebenen Inhalte Ihnen bei der JavaScript-Programmgestaltung helfen.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheber. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie Inhalte mit Urheberrechtsverletzungen finden, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden.3Wenn Sie eine Meldung senden, ersetzen Sie bitte # durch @ und geben Sie relevante Beweise an. Bei nachgewiesener Urheberrechtsverletzung wird die Website den fraglichen Inhalt sofort löschen.