حسین همت یار
فصل چهارم ( معرفی HTML5 )
جلسه دوازدهم (Web Storage در HTML5 )
سلام خدمت همراهان عزیز مدرسه مجازی ایرانیان
دوستان در این جلسه ، Web Storage در HTML5 رو به شما معرفی میکنم . Web Storage یکی از API های HTML5 هست که میتونید از این تکنولوژی کاربردی به راحتی استفاده کنید .
Web Storage
با استفاده از این API شما میتونید داده ها و اطلاعات رو در مرورگر ذخیره کنید . این API شبیه به Cookie عمل میکنه . اما امن تر و سریع تر از Cookie هست . این قابلیت میتونه داده های حجیم رو هم ذخیره کنه بدون اینکه در عملکرد صحیح سایت تاثیر منفی بذاره .
این قابلیت در مرورگرهای Internet Explorer 8+, Firefox, Opera, Chrome, Safari پشتیبانی میشه .
Web Storage از دو object زیر برای ذخیره سازی داده ها استفاده میکنه :
window.localStorage : داده هارو بدون تاریخ انقضاء ذخیره میکنه .
code.sessionStorage : داده ها رو در یک session ذخیره میکنه و با بستن مرورگر داده ها حذف خواهند شد .
قبل از اینکه بخواین از web storage استفاده کنید ، مطمئن بشید که مرورگر شما از localStorage و sessionStorage پشتیبانی میکنه . برای اینکار در جاوا اسکریپت ما به این صورت web storage رو تعریف می کنیم . اگر مرورگر این دو object رو شناسایی کرد ، خوب عملیات رو انجام بده اما اگر شناسایی نکرد به کاربر پیغامی رو نمایش میده مبنی بر اینکه این مرورگر توانایی پشتیبانی از این تکنولوژی رو نداره :
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ |
if(typeof(Storage)!=="undefined") { // Code for localStorage/sessionStorage. } else { // Sorry! No Web Storage support.. } |
localStorage Object
این object داده ها و اطلاعات رو بدون تاریخ انقضاء ذخیره سازی میکنه . اطلاعات با بستن مرورگر از بین نمیره و روزها ، ماه ها و سال ها در مرورگر شما باقی میمونه .
|
۱ ۲ |
localStorage.setItem("lastname", "rahimi"); document.getElementById("result").innerHTML=localStorage.getItem("lastname"); |
کد بالا مقداری رو بصورت رشته در lastname ذخیره میکنه و در عنصری با آی دی result نمایش میده .
این کد رو بصورت زیر هم میتونید بنویسید :
|
۱ ۲ |
localStorage.lastname = "rahimi"; document.getElementById("result").innerHTML=localStorage.lastname; |
برای حذف مقادیر ذخیره شده هم از دستور زیر استفاده می کنیم :
|
۱ |
localStorage.removeItem("lastname"); |
به عنوان مثال کدی رو براتون قرار میدم که تعداد کلیک های شما رو روی دکمه ذخیره میکنه و تعداد کلیک هارو نمایش میده و چون توسط localStorage این عمل انجام شده ، با بستن مرورگر هم این تعداد reset نمیشه :
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> body{font: ۱۳px/15px tahoma; text-align: right; direction: rtl;} </style> <script> function clickCounter() { if(typeof(Storage)!=="undefined") { if (localStorage.clickcount) { localStorage.clickcount=Number(localStorage.clickcount)+۱; } else { localStorage.clickcount=۱; } document.getElementById("result").innerHTML="تعداد کلیک شما روی دکمه " + localStorage.clickcount + " کلیک ."; } else { document.getElementById("result").innerHTML="متاسفانه ، مرورگر شما این قابلیت رو پشتیبانی نمیکند ."; } } </script> </head> <body> <p><button onclick="clickCounter()" type="button">Click me!</button></p> <div id="result"></div> <p>بر روی دکمه کلیک کنید تا تعداد دفعات را ببینید .</p> <p>مرورگر خود را ببندید و دوباره شروع کنید اما تعداد کلیک های شما reset نخواهد شد .</p> </body> </html> |
کد بالا رو در یک فایل html ذخیره کنید و اجرا کنید تا نتیجه رو ببینید . البته فایل در انتهای جلسه ضمیمه میشه و میتونید دانلود کنید .
sessionStorage Object
این object هم دقیقا مثل localStorage عمل میکنه ، با این تفاوت که در sessionStorage داده ها در یک session ذخیره میشه و با بستن مرورگر داده ها حذف میشه . نمونه کد زیر ، دقیقا مثالی هست که در بالا براتون گذاشتم ، تعداد کلیک هارو محاسبه میکنه و نمایش میده اما تفاوت این دو کد در اینه که تعداد کلیک ها با بستن مرورگر reset میشه :
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> body{font: ۱۳px/15px tahoma; text-align: right; direction: rtl;} </style> <script> function clickCounter() { if(typeof(Storage)!=="undefined") { if (sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.clickcount)+۱; } else { sessionStorage.clickcount=۱; } document.getElementById("result").innerHTML="تعداد کلیک شما روی دکمه " + sessionStorage.clickcount + " کلیک ."; } else { document.getElementById("result").innerHTML="متاسفانه ، مرورگر شما این قابلیت رو پشتیبانی نمیکند ."; } } </script> </head> <body> <p><button onclick="clickCounter()" type="button">Click me!</button></p> <div id="result"></div> <p>بر روی دکمه کلیک کنید تا تعداد دفعات را ببینید .</p> <p>مرورگر را ببندید ، مجدد باز کنید ، حالا روی دکمه کلیک کنید ، بخاطر اینکه از sessionStorage استفاده کردیم تعداد کلیک ها reset شد .</p> </body> </html> |
خوب این جلسه هم به اتمام رسید . امیدوارم مفید واقع شده باشه 🙂
تهیه شده در مدرسه مجازی ایرانیان
سلام خسته نباشید
مدت ها بود می خواستم یه مقاله به زبان ساده پیدا کنم تا این تکنیک جدید رو آموزش بده
لطفا این آموزش ها ی مفید رو ادامه بدید
ممنون
سلام
خوشحالیم که براتون مفید بود . بله حتما ، انشالله به زودی پس از تکمیل بخش css ، یک پروژه ی عملی تبدیل psd به Html5 , Css3 , Jquery انتهای فصل html انجام خواهیم داد و فیلم های آموزشی هر جلسه رو انتهای اون جلسه برای دانلود قرار میدیم .
موفق باشید .
لطفا نحوه ایجاد قالب آژاکس رو آموزش بدید.
منظورم اینه که چطوری یک فرم ، یا قالب و … رو به صورت کاملا آزاکس بسازیم؟
سلام دوست عزیز
به احتمال زیاد این آموزش رو همراه با دانلود آموزش در بخش مقالات Ajax قرار میدم .
موفق باشید .
سلام
اگه امکانش هست، آموزشی که در هر جلسه میدهید رو در انتهای آن به صورت PDF برای دانلود قرار دهید تا دوستانی که مثل من دیرتر با این سایت آشنا شدن، بتونن فایل آموزش رو دانلود کرده و خودشون رو به شما برسونن
فکر کنم اینجوری راحت تر باشه برای ما
ممنون از سایت خوبتون
سلام
دوست عزیز من دقیقا متوجه تفاوت این دو وضعیت نشدم ، از سایت بصورت مستقیم آموزش رو یاد بگیرید یا فایل pdf ش رو دریافت کنید و یاد بگیرید . چه تفاوتی داره ؟ هر دو محتوا که یکی هستن .
سلام میشه این قابلیتو به جای کوکی استفاده کردن مثلا میشه از LocalStorage که در یک صحفه ست شده در صحفه دیگری استفاده کرد ممنون
سلام ، سوالات فقط در بخش پرسش و پاسخ جواب داده خواهد شد . تشکر