Метод реализации локального хранения информации (на основе localStorage и userData)

Этот пример рассказывает о методах реализации локального хранения данных с помощью JS. Предлагается к рассмотрению, подробности см. ниже:

Быстрое развитие WEB-приложений сделало необходимым локальное хранение данных, и существует множество способов их реализации, наиболее распространенным из которых является cookie, который часто используется, но у него есть очевидные недостатки. Другие методы, такие как userData в IE6 и выше, globalStorage в Firefox и локальное хранение 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 Получает ссылку на XML.

Методы:

getAttribute() Получает значение заданного атрибута.
load(object) Загружает сохраненные данные объекта из области хранения userData.
removeAttribute() Удаляет заданный атрибут объекта.
save(object) Сохранивает данные объекта в области хранения userData.
setAttribute() Установить значение指定的 атрибута.

localStorage

Метод:

localStorage.getItem(key): Получить значение локального хранилища с указанным ключом
localStorage.setItem(key,value)： Сохранить значение value в поле key
localStorage.removeItem(key): Удалить значение локального хранилища с указанным ключом

封装

hname:location.hostname?location.hostname:'localStatus',
  isLocalStorage:window.localStorage?true:false,
  dataDom:null,
  initDom:function(){ // Инициализация userData
  if(!this.dataDom){
   try{
    this.dataDom = document.createElement('input'); // Здесь используется элемент input с типом hidden
     this.dataDom.addBehavior('#default#userData'); // Это синтаксис userData
     this.dataDom.type = 'hidden';
     this.dataDom.style.display = "none";
     exDate = exDate.getDate()+30;
     document.body.appendChild(this.dataDom);
     var exDate = new Date();
     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);
    }
   }
  }
}

Метод использования очень прост, просто это раздел set, get, remove.

Внутри涉及到的 demo код таков:

<script type="text/javascript">
(function() {
  window.localData = {
    hname : location.hostname ? location.hostname : 'localStatus',
    isLocalStorage : window.localStorage ? 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>

Есть еще одна полезная техника,阻止页面关闭，显示关闭页面确认弹出框，пример кода см. ниже:

window.onbeforeunload = function() {
  if (!canLeavePage()) {
    подтвердите выход из текущей страницы? Не сохраненные данные будут потеряны!
  }
};

Для тех, кто интересуется дополнительной информацией о JavaScript, можно ознакомиться с темами на нашем сайте: «Введение в面向对象的 программирование на JavaScript», «Суммарные советы по поисковым алгоритмам JavaScript», «Суммарные советы по структурам данных и алгоритмам JavaScript», «Суммарные советы по операциям с json в JavaScript», «Суммарные советы по ошибкам и отладке JavaScript» и «Суммарные советы по математическим операциям JavaScript»

Надеюсь, что информация, изложенная в этой статье, поможет вам в разработке программ на JavaScript.

Заявление: содержимое этой статьи взято из Интернета, авторские права принадлежат соответствующему автору. Контент предоставлен пользователями Интернета, загружен самостоятельно, сайт не имеет права собственности, не был отредактирован вручную и не несет ответственности за соответствующие юридические вопросы. Если вы обнаружите контент,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма замените # на @), чтобы сообщить о нарушении, и предоставьте соответствующие доказательства. Если будет установлено, что содержимое нарушает права на интеллектуальную собственность, сайт немедленно удалят.