정보의 로컬 저장소를 구현하는 JS 메서드(localStorage 및 userData 기반)-JS 튜토리얼-php.cn

정보의 로컬 저장소를 구현하는 JS 메서드(localStorage 및 userData 기반)

高洛峰

풀어 주다： 2017-02-20 16:34:05

원래의

1444명이 탐색했습니다.

이 글에서는 JS가 정보의 로컬 저장을 구현하는 방법을 주로 소개합니다. localStorage와 userData를 기반으로 로컬 저장 기능을 구현합니다. 필요한 친구들이 참고할 수 있습니다.

이 글의 예는 다음과 같습니다. 정보의 로컬 저장을 구현하는 JS의 방법입니다. 참고할 수 있도록 자세한 내용은 다음과 같습니다.

웹 애플리케이션의 급속한 발전으로 일부 데이터의 로컬 저장이 중요한 요구 사항이 되었으며 가장 일반적인 구현 솔루션이 많이 있습니다. 자주 사용되지만 쿠키의 단점은 분명합니다. 다른 솔루션에는 IE6 이상의 userData, Firefox의 globalStorage 및 Flash의 로컬 저장소가 포함됩니다.

sessionStorage 및 localStorage

웹 저장소는 실제로 sessionStorage와 localStorage의 두 부분으로 구성됩니다.

sessionStorage는 세션에 데이터를 로컬로 저장하는 데 사용됩니다. 이러한 데이터는 동일한 세션의 페이지에서만 액세스할 수 있으며 세션이 끝나면 데이터가 삭제됩니다. 따라서 sessionStorage는 영구 로컬 저장소가 아니며 세션 수준 저장소일 뿐입니다.

localStorage는 영구 로컬 저장소로 사용됩니다. 데이터가 적극적으로 삭제되지 않는 한 데이터는 만료되지 않습니다.

userData

구문:

XML <접두사: CustomTag ID=sID STYLE= "behavior:url('#default#userData')" />
HTML
스크립팅 개체 .style. 동작 = "url('#default#userData')"
object .addBehavior ("#default#userData")

속성:

저장된 데이터의 userData 동작 만료 날짜를 설정하거나 가져옵니다.
XMLDocument XML에 대한 참조를 가져옵니다.

방법:

getAttribute() 지정된 속성 값을 가져옵니다.
load(object) userData 저장 영역에 저장된 객체 데이터를 불러옵니다.
removeAttribute() 객체의 지정된 속성을 제거합니다.
save(object) 객체 데이터를 userData 저장소에 저장합니다.
setAttribute() 지정된 속성 값을 설정합니다.

localStorage

메서드:

localStorage.getItem(key):지정된 키 로컬 가져오기 저장
localStorage.setItem(key,value)： 값은 키 필드에 값을 저장합니다.
localStorage.removeItem(key):지정된 키에 로컬로 저장된 값을 삭제합니다.

캡슐화합니다

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

로그인 후 복사

사용 방법은 매우 간단합니다. 이 섹션에서 설정, 가져오기, 제거만 하면 됩니다.

관련 데모 코드는 다음과 같습니다.

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

로그인 후 복사

페이지 방지를 위한 보다 실용적인 기술도 있습니다. 에서 페이지 닫기 확인 팝업 상자를 표시하면 참조 코드는 다음과 같습니다.

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

로그인 후 복사

이 글이 JavaScript 프로그래밍에 종사하는 모든 분들께 도움이 되기를 바랍니다.

로컬 정보 저장소(localStorage 및 userData 기반)를 구현하는 더 많은 JS 메소드를 보려면 PHP 중국어 웹사이트에 주목하세요!