Métodos de implementação do armazenamento local de informações do JS (baseado em localStorage e userData)

Este exemplo descreve como implementar o armazenamento local de informações em JS. Compartilho com vocês para referência, conforme abaixo:

O rápido desenvolvimento de aplicações WEB, tornou a salvaguarda de alguns dados uma necessidade importante, existem muitos métodos de implementação, o mais comum é o cookie, que todos usam frequentemente, mas as desvantagens do cookie são evidentes, outras soluções como: IE6Os userData, Firefox globalStorage, e o armazenamento local do Flash, além do Flash, todos têm alguns problemas de compatibilidade.

sessionStorage e localStorage

Web Storage é composto por duas partes: sessionStorage e localStorage.

sessionStorage é usado para armazenamento local de uma sessão (sessão) de dados, esses dados podem ser acessados apenas nas páginas da mesma sessão e são destruídos quando a sessão termina. Portanto, sessionStorage não é um armazenamento local persistente, é apenas um armazenamento de nível de sessão.

localStorage é usado para armazenamento local persistente, a menos que os dados sejam excluídos ativamente, os dados nunca expirarão.

userData

Sintaxe:

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 configura ou obtém a data de expiração da salvaguarda de dados do userData behavior.
XMLDocument 获取 XML 的引用。

方法:

getAttribute() 获取指定的属性值。
load(object) 从 userData 存储区载入存储的对象数据。
removeAttribute() 移除对象的指定属性。
save(object) 将对象数据存储到一个 userData 存储区。
setAttribute() 设置指定的属性值。

localStorage

方法：

localStorage.getItem(key):获取指定 key 本地存储的值
localStorage.setItem(key,value)：将 value 存储到 key 字段
localStorage.removeItem(key):删除指定 key 本地存储的值

封装

localData = {
  ;hname:location.hostname&63;location.hostname:'localStatus',
  ;isLocalStorage:window.localStorage&63;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();//设置过期时间
    }
     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);
    }
   }
  }
}

使用方法很简单，这节 set, get, remove 就好了。

在里面涉及到的 demo 代码如下：

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

Há uma técnica muito útil para evitar que a página seja fechada, mostrando uma caixa de diálogo de confirmação de fechamento da página. O código de referência é o seguinte:

window.onbeforeunload = function() {
  if (!canLeavePage()) {
    return ('Confirma sair da página atual? Os dados não salvos serão perdidos!');
  }
};

Leitores interessados em mais conteúdo sobre JavaScript podem consultar as seções especiais deste site: 'Tutorial de Entrada em Objetos JavaScript', 'Técnica de Busca em JavaScript', 'Técnica de ESTRUTURA DE DADOS e ALGORITMO em JavaScript', 'Técnica de OPERAÇÃO JSON em JavaScript', 'Técnica de ERRO e DEBUG em JavaScript' e 'Técnica de OPERAÇÃO MATEMÁTICA em JavaScript'.

Espero que o que é discutido neste artigo ajude a todos a programar em JavaScript.

Declaração: o conteúdo deste artigo é extraído da Internet, pertence ao respectivo proprietário. O conteúdo é contribuído e carregado voluntariamente pelos usuários da Internet. Este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidades legais relacionadas.3codebox.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Aparentemente confirmada, o site será imediatamente eliminado do conteúdo suspeito de violação de direitos autorais.)