یادداشت‌ها

ابرکوکی و ذخیره ساز جدید 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 مثال زده شده است:

• Web storage
• Comparing HTTP Cookies with DOM Storage
• DOM Storage – The new super cookie you have dreamed of
• The Past, Present & Future of Local Storage for Web Applications
• Using DOM sessionStorage and localStorage to persist larger amounts of info
• یک مثال آموزشی: تهیه یک دفترچه تلفن که اطلاعاتش به صورت آفلاین ذخیره می‌شود

[آپدیت 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 فراهم کرده است و یک پلاگین خوب انگولرجی‌اس برای آن نیز نوشته شده است.

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