طريقة تنفيذ التخزين المحلي للمعلومات في JS (باستخدام localStorage و userData)

يشرح هذا المقال كيفية تنفيذ تخزين المعلومات المحلية باستخدام JS. يُشارك معكم للاستفادة منه، وهو كالتالي:

التنمية السريعة لخدمات الويب، جعلت تخزين بعض البيانات المحلية也成为 احتياجًا مهمًا، ويوجد العديد من الحلول لتحقيق ذلك، الأكثر شيوعًا هو cookie، ويستخدم الجميع عادةً، ولكن عيوب 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.
XMLDocument الحصول على إشارة إلى XML.

الطريقة:

getAttribute() الحصول على قيمة الخاصية المحددة.
load(object) تحميل بيانات الكائن المخزنة من منطقة التخزين userData.
removeAttribute() إزالة الخاصية المحددة من الكائن.
يُنقذ(object) بيانات الكائن إلى منطقة التخزين userData.
setAttribute() 设置指定的属性值。

localStorage

方法：

localStorage.getItem(key):获取指定 key 本地存储的值
localStorage.setItem(key,value)：将 value 存储到 key 字段
localStorage.removeItem(key):删除指定 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'); // 这里使用 hidden 的 input 元素
     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()) {
    return ('هل تريد الخروج من هذه الصفحة الحالية؟ البيانات غير المحفوظة ستفقد!');
  }
};

المزيد عن محتوى JavaScript المثير للاهتمام يمكن للقراء الراغبين في الرؤية أن يزوروا مواضيع الموقع هذه: 'دليل بدء تصميم البرامج الموجهة بـ JavaScript'، 'ملخص تقنيات البحث في JavaScript'، 'ملخص تقنيات البيانات والخوارزميات في JavaScript'، 'ملخص تقنيات التفاعل بـ JSON في JavaScript'، 'ملخص تقنيات الأخطاء والتصحيح في JavaScript'، و 'ملخص استخدام العمليات الحسابية في JavaScript'.

آمل أن يكون هذا المقال قد ساعد الجميع في تصميم برامج JavaScript.

إعلان: محتوى هذا المقال تم جمعه من الإنترنت، ويعود حقوق الملكية إلى صاحب الحقوق، ويتم جمع المحتوى من إسهامات المستخدمين عبر الإنترنت الذين يقومون بتحميله بأنفسهم، ولا يمتلك هذا الموقع حقوق الملكية، ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية مرتبطة بذلك. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق النسخ، فأنت موصى بارسال بريد إلكتروني إلى: notice#oldtoolbag.com (يرجى استبدال # ب @ عند إرسال البريد الإلكتروني) لتقديم الشكوى، وتقديم الأدلة ذات الصلة، وسيتم حذف المحتوى المزعوم الذي يشتبه في انتهاك حقوق النسخ على الفور إذا تم التحقق من صحة الشكوى.