ایجاد: ۹:۲۰ ۱۳۹۱/۱۱/۶
ویرایش: ۲۳:۲۰ ۱۳۹۴/۷/۲۳

یادداشت‌ها

»

ابرکوکی و ذخیره‌ساز جدید HTML5

کوکی‌ها به فایل‌های کوچکی گفته می‌شد که توسط برنامه‌نویسان سایت‌ها، برای مقاصد مختلفی مانند «ذخیره تنظیمات»، «ذخیره وضعیت احراز هویت» و ... کاربرد داشته و دارند.
یکی از محدودیت‌های کوکی‌ها، «حجم» و فضای آنها بود که معمولا محدود به 4 کیلوبایت بود. یکی دیگر از معایب آن این است که هر کسی در مسیر کاربر تا سرور باشد، می‌تواند با شنود خط، وضعیت رفتارهای کاربر را متوجه شود؛ چون کوکی در هر درخواستی، (همراه header مربوط به request) ارسال می‌شود.

نیاز به ذخیره اطلاعات به صورت آفلاین در حجمی بیشتر بر روی کامپیوتر کاربر، موجب شده که طرح‌های مختلفی برای این نیاز ارائه شود. (ببینید) که در بین این راه‌کارها، امکانی به نام DOM storage یا Web Storage با استقبال بیشتری از سوی براوزرها روبرو بوده بطوری که هم اکنون بیش از 91 درصد براوزرها از این امکان پشتیبانی می‌کنند. (لیست کامل براوزرهایی که این امر را ساپورت می‌کنند به همراه ورژن آنها)
این قابلیت جزو امکانات HTML5 دانسته می‌شود در حالی که اینطور نیست و در IE8 نیز این امکان وجود دارد. این قابلیت، به راحتی امکان دسترسی به مقادیر بر حسب کلید را در فضایی که بیش از هزار برابر کوکی‌هاست، به شما می‌دهد و همچنین عیب امنیتی کوکی (در خصوص شنود خط) را نیز ندارد.
این فضا در مرورگر کروم 2.5 مگا کاراکتر و در بقیه 5 مگا کاراکتر است. توضیح آنکه در جاوا اسکریپت هر کاراکتر به صورت UTF-16 ذخیره می‌شود لذا دو بایت فضا اشغال می‌کند. از مهم‌ترین مصارف این فضا، بارگذاری محتویات استاتیک پرتکرار و پرکاربرد در یک سایت است.

ذکر این نکته نیز بد نیست که اگر شما هنوز بر پشتیبانی از IE6 ببعد اصرار دارید، می‌توانید از پلاگین localStorage shim استفاده کنید که با استفاده از قابلیت UserData که از نسخه 5.5 اینترنت اکسپلورر وجود داشته، ویژگی DOM Storage را شبیه‌سازی کرده است.

در چند مقاله زیر، علاوه بر توضیحاتی پیرامون این ویژگی، نمونه کدهایی برای ذخیره و بازیابی (نوشتن و خواندن) با استفاده از DOM Storage مثال زده شده است:

پلاگین‌های زیادی برای سادگی کار با DOM Storage و سایر روش‌های کش کردن دیتا بصورت آفلاین وجود دارد اما من پلاگین DSt به خاطر سادگی در ذخیره و بازیابی فرم ترجیح می‌دهم.

[آپدیت 6 شهریور 92] پلاگین محبوب و پرطرفدار store.js پلاگینی کوچک است که هم cross browser است و هم امکان ذخیره انواع داده‌ها را در ابرکوکی localStorage فراهم می‌کند. توضیح آنکه به صورت پیش‌فرض فقط می‌توان به ازاء یک key یک value از نوع string تعریف کرد اما با کمک این پلاگین شما می‌توانید انواع متغیرهای عددی و آرایه‌ای و ... را در localStorage ذخیره کنید.

[آپدیت 29 آبان 92] پلاگین محبوب basket.js نیز از امکان localStorage برای کش کردن فایل‌های js استفاده کرده و شما با افزودن 1 کیلوبایت کد js می‌توانید از قابلیت آن استفاده کنید.

[آپدیت 25 دی 92] علاوه بر DSt که در بالا معرفی شد، پلاگین DataSaver نیز پلاگینی جدید و ساده برای ذخیره و بازیابی فرم‌هاست. Squirrel.js نیز پروژه ساده و مشابه دیگری است.

[آپدیت 16 بهمن 92] برای تست پشتیبانی براوزر شما از storage ها و ظرفیت آن، می‌توانید این لینک یا این لینک را ببینید و خواندن مقاله جدید Working with quota on mobile browsers نیز توصیه می‌شود.

[آپدیت 23 بهمن 92] در صورت پر شدن ظرفیت، مقادیر موجود overWrite نمی‌شود بلکه برنامه موفق به ذخیره مقدار جدید نمی‌شود. لذا بهتر است set کردن مقادیر جدید اینگونه باشد:

function setNewValue(key, value) {
    try {
        localStorage.key = value;
        return true;
    } catch (e) {
        if (e.name==='QuotaExceededError' || e.name==='NS_ERROR_DOM_QUOTA_REACHED')
            alert('ظرفیت حافظه پر شده است، لازم است از مقادیر قبلی حذف کنید تا مقدار جدیدی بتوانید ذخیره کنید');
        return false;
    }
}

[آپدیت 1 اسفند 92] با استفاده از آبجکت JSON و دو متد stringify و parse می‌توان در اغلب مرورگرها (حتی IE8) یک آبجکت را به یک رشته تبدیل کرد و برعکس. لذا چنانچه هدف شما از استفاده از پلاگین‌های فوق، این 2 متد است، بهتر است بجای آن‌ها مستقیما از این دو متد استفاده کنید. (راهنمای بیشتر در مورد این دو متد).

[آپدیت 5 بهمن 93] یکی از کاربردهای جدید و جالب لوکال استورج، برای ذخیره فونت‌ها است که در این مطلب توضیح دادم.

[آپدیت 11 بهمن 93] یکی دیگر از کاربردهای جالب localStorage ارتباط بین تب‌ها و پنجره‌هایی است که کاربر از سایت شما باز کرده است که در این مقاله تشریح شده است. مثلا فرض کنید چند پنجره از سایت شما باز است و در همه پنجره‌های پنجره چت یا ... وجود دارد و شما می‌خواهید که وقتی صفحه فعلی آپدیت شد، سایر صفحات نیز آپدیت شوند (بدون درخواست اضافه).

[آپدیت 24 اسفند 93] برای ذخیره‌سازی، indexDB, WebSQL, localStorage سه روش هستند که localStorage از بقیه محدودتر است اما در بین مرورگرها مقبولیت بیشتری دارد. شرکت موزیلا، امکان استفاه از هر سه را با یک API ساده در پروژه localForage فراهم کرده است و یک پلاگین خوب انگولرجی‌اس برای آن نیز نوشته شده است.

[آپدیت 28 تیر 94] در این مطلب 15 پلاگین در این مورد معرفی شده که البته برخی از آنها را قبلا در همین صفحه معرفی کرده بودم.
یادداشت‌های مرتبط
  1. کشیدن و انداختن (رها کردن)
  2. برنامه‌های تحت وب آفلاین، چرا و چگونه؟
  3. نمودارها در صفحات وب
  4. نقشه Google در سایت شما
  5. انیمیشن با CSS
  6. روش های بهبود کیفیت آپلود فایل ها از طریق فرم های صفحات وب
  7. تولید کپچای ضد گلوله!
  8. انواع روش‌های شناسایی و احراز هویت کاربران یک صفحه وب
  9. پلاگین هایی برای کار با فرم های ورود اطلاعات
  10. کار با قابلیت Page Visibility و کاربردهای آن
  11. اعتبارسنجی و شکل‌دهی فرم‌ها با استفاده از html5
  12. ادیتورهای محتوای غنی‌شده برای صفحات وب
  13. html نسخه 5
  14. پخش‌کننده‌های فایل صوتی تصویری در صفحات وب
  15. برنامه نویسی اندروید
  16. ارتفاع اتوماتیک ورودی متن جهت حذف اسکرول
  17. پایگاه داده در جاوا اسکریپت
  18. کار با تصاویر در سمت کاربر

مدیریت

نام وسیله

اعتبار ورود

نام کاربری

رمز عبور

رمز یکبارمصرف

... لیست تمام یادداشت‌ها

تبلیغات

ربات‌های تلگرامی:
مجموعه ربات‌های تلگرامی ما برای ساده‌تر کردن کار با تلگرام و مدیریت کانال و ...
خرید هاست (فضا):
دنبال یک هاست به صرفه برای شروع کار می‌گردید؟
مشخصات و قیمت‌های این مورد رو ببینید. من سال‌ها مشتری‌شون بودم و پشتیبانی‌شون هم خوب بود.
دامنه‌های فروشی:
دامنه‌های زیر مربوط به ما یا مشتریان ماست که قابل فروش هستند. در صورت تمایل به خرید یکی از آنها، مبلغ پیشنهادی را از طریق فرم ارتباطی برای ما ارسال نمایید.

دامنه‌هایی که می‌تواند مصرف مذهبی داشته باشد:
دامنه‌هایی که می‌تواند مصرف تخصصی داشته باشد:
دامنه‌هایی که می‌تواند مصرف شخصی/عمومی داشته باشد: