اموزش HTML 5 جلسه چهارم
- دوشنبه, ۹ آذر ۱۳۹۴، ۱۰:۴۸ ب.ظ
با عرض سلام و خسته نباشید خدمت دوستان عزیز با جلسه ی چهارم آموزش HTML5 در خدمت شما هستم
در این جلسه که جلسه یکی مونده به آخرمون هست به بررسی HTML5 Web Storage و همچنین به مباحث کشینگ در HTML5 می پردازیم
با HTML5 صفحات وب می توانند اطلاعات را به صورت محلی در مرورگر کاربر ذخیره کنیم
قبل از این، این کار با کوکی ها انجام می شد. با این حال، ذخیره سازی وب امن تر و سریعتر هست. داده ها شامل هر درخواست سروری نمی شود، اما از تنها زمانی که خواسته شود، استفاده می شود. همچنین امکان ذخیره مقادیر زیادی از داده ها نیز وجود دارد ، بدون تاثیر بر عملکرد وب سایت.
داده ها در قالب جفت کلید/مقدار یا همون key/value ذخیره می شود ، و یک صفحه وب تنها می تواند به داده هایی که توسط خودش ذخیره شده است دسترسی داشته باشد.
ذخیره سازی وب در اینترنت اکسپلورر 8 +، فایرفاکس، اپرا، کروم و سافاری پشتیبانی می شود.
دقت داشته باشید که مرورگر اینترنت اکسپلورر 7 و نسخه های قبلی، از ذخیره سازی وب سایت پشتیبانی نمی کنند.
دو آبجکت برای ذخیره سازی داده ها بر روی سمت سرویس گیرنده وجود دارد:
localstorage - داده ها را بدون تاریخ انقضا ذخیره می کند
sessionStorage - داده ها را برای یک دوره ذخیره می کند
قبل از استفاده از ذخیره سازی وب ، پشتیبانی مرورگر برای localstorage و sessionStorage را بررسی کنید :
if (typeof(Storage)!=="undefined")آبجکت localStorage
{
// Yes! localStorage and sessionStorage are supported!
// Some code.....
}
else
{
// Sorry! No web storage support HAHAHAHA
}
آبجکت ذخیره سازی محلی ، داده ها را بدون تاریخ انقضا ذخیره می کند. داده زمانی که مرورگر بسته شود حذف نخواهد شد ، و روز بعد، هفته و یا سال بعد در دسترس خواهد بود.
localStorage.lastname="Rahnemoon";توضیح مثال:
document.getElementById("result").innerHTML="Last name: "
+ localStorage.lastname;
ایجاد یک جفت کلید/مقدار ذخیره سازی محلی با استفاده از کلید key="lastname" and value="rahnemoon"
بازیابی مقدار کلید "lastname" و وارد کردن آن به عنصری با id="result"
نکته: جفت کلید/مقدار همواره به صورت رشته ای ذخیره می شود. به یاد داشته باشید زمانی که مورد نیاز است ، فرمت های آنها را به دیگر فرمت ها تبدیل کنید.
مثال زیر تعداد دفعاتی را که کاربر یک دکمه را کلیک کرده است ، شمارش می کند. در این کد ، رشته ارزش تبدیل به یک عدد شده است تا قادر به افزایش شمارشگر باشد :
if (localStorage.clickcount)آبجکت sessionStorage
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
آبجکت sessionStorage با آبجکت localStorage برابر است ، به جز اینکه sessionStorage داده ها را فقط برای یک جلسه ذخیره می کند. زمانی که کاربر پنجره مرورگر را می بندد اطلاعات حذف می شود.
مثال زیر تعداد دفعاتی که کاربر یک دکمه را در جلسه جاری کلیک کرده است ، شمارش می کند
یچیزی مث سشن ها در پی اچ پی هست ولی خوب ناامن تر و کلاینت ساید هستش
مثالی از این مورد میزنم تا عملکرد سشن استوریج ها را ببنید:
if (sessionStorage.clickcount)تفاوت این کد با کد قبلی این هست که به محض اینکه صفحه را ببندید محتوای سشن استوریج حذف خواهد شد
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
خب این از بخش استوریج ها
حالا میریم سروقت کش ها
کش برنامه به یک برنامه سه مزیت می دهد :
مرور آفلاین - کاربران زمانی که آفلاین هستند می توانند از برنامه استفاده کنند
سرعت - منابع کش سریعتر بارگذاری می شوند
کاهش بار سرور - مرورگر تنها منابع "به روز رسانی شده" / "تغییر یافته " را از سرور دانلود خواهد کرد
کش برنامه در تمام مرورگرهای بزرگ، طبق معمول 😒 به جز مرورگر اینترنت اکسپلورر پشتیبانی می شود.
حالا باید ببینیم کش منیفست چی هست
کش منیفست فایلی هستش که داخلش میتونید تنظیماتی برای کش تون انجام بدید و با فرمت .appcache است
مثال زیر یک سند HTML با Cache Manifest (برای مرور آفلاین) را نشان می دهد:
<!DOCTYPE HTML>اینجا منیفست مان را با اتتریبیوت منیفست تعیین کردیم
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>
در صفحه با خاصیت Manifest مشخص ، زمانی که کاربر آن را مشاهده کند ، کش شده خواهد شد. در صورتی که خاصیت Manifest مشخص نشده باشد ، صفحه کش شده نخواهد بود. (مگر این که صفحه به طور مستقیم در فایل Manifest مشخص شده باشد)
یک فایل Manifest باید با نوع MIME درست ارائه شود ، که این نوع : "text/cache-manifest" است. همچنین باید بر روی وب سرور تنظیم شده باشد.
ایل مانیفست یک فایل متنی ساده است که به مرورگر می گوید چه چیزی باید کش شود (و چه چیزی هرگز کش نشود).
فایل مانیفست دارای سه بخش است:
CACHE MANIFEST - فایل های لیست شده در زیر این عنوان پس از آنها برای اولین بار دریافت شوند ، کش خواهند شد
NETWORK - فایل های لیست شده در زیر این عنوان نیاز به اتصال به سرور دارند ، و هرگز کش نخواهند شد
FALLBACK - فایل های لیست شده در زیر این عنوان اگر یک صفحه غیر قابل دسترس باشد ، صفحاتی یدکی را مشخص می کنند
خط اول، CACHE MANIFEST ، مورد نیاز است:
CACHE MANIFESTفایل MANIFEST در بالا سه منبع را لیست می کند : یک فایل CSS، یک تصویر GIF، و یک فایل جاوا اسکریپت. هنگامی که فایل مانیفست بارگذاری شود، مرورگر سه فایل را از دایرکتوری ریشه وب سایت دانلود خواهد کرد. پس از آن، هر زمان که کاربر به اینترنت متصل نیست، منابع هنوز هم در دسترس خواهند بود. NETWORK بخش شبکه زیر مشخص که هرگز نباید فایل "login.asp" پنهان شده اند، و نه در دسترس خواهد بود نیست.
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
از ستاره * می توان برای نشان دادن اینکه تمام منابع / فایل های دیگر نیاز به اتصال به اینترنت دارند، استفاده کرد:
NETWORK:
*
FALLBACK
بخش FALLBACK زیر مشخص می کند در صورتی که اتصال به اینترنت نتواند برقرار شود "offline.html" در محل تمام فایل ها در کاتالوگ/HTML/ ارائه خواهد شد :
FALLBACK:توجه: URI اول منبع است ، دومی ، یدکی fallback .
/html/ /offline.html
چند نکته هم درباره کش بگم
راقب آنچه کش می کنید ، باشید.
هنگامی که یک فایل کش می شود ، مرورگر نشان دادن نسخه کش شده را ادامه خواهد داد ، حتی اگر شما فایل را بر روی سرور تغییر دهید. برای اطمینان از به روز رسانی کش توسط مرورگر ، شما نیاز به تغییر فایل مانیفست دارید.
توجه: مرورگرها ممکن است محدودیت های مختلف اندازه برای داده های کش شده ، داشته باشند (برخی مرورگرها محدودیت 5MB برار هر سایت)
خب این جلسه از آموزش Html5 هم به پایان رسید
امیدوارم مفید واقع شده باشد
به امید دیدار😊😊
