اگر علاقه مند به همکاری در نت پارادیس جهت نویسندگی، ویراستاری و ترجمه مطالب هستی پس روی دکمه مقابل کلیک کن

علاقه به همکاری دارم

طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

آموزش HTML – ذخیره اطلاعات با web storage در HTML5


آموزش HTML - مقدمه

در جلسه قبلی آموزش HTML با راه های پخش ویدئو در html آشنا شدیم. در این بخش به ذخیره اطلاعات با web storage در html خواهیم پرداخت.

Web storage در HTML5 برای ذخیره داده ها در مروگر کاربر استفاده می شود

 

Web storage در HTML5 چیست

قابلیت Web storage در HTML5 به شما امکان ذخیره اطلاعات بصورت لوکال روی کامپیوتر کاربر را می دهد, مشابه کوکی, اما سریعتر و خیلی بهتر از کوکی ها.

به هر حال, Web storage ها بیشتر از کوکی ها امن نیستند. لطفا برای دریافت اطلاعات بیشتر در مورد کوکی ها, آموزش cookie در php را مطالعه کنید.

داده های ذخیره شده در Web storage به سمت سرور ارسال نمی شود در حالی که داده های کوکی در هر درخواست به سرور ارسال می شود.

همچنین کوکی ها به شما اجازه ذخیره حجم کمی از داده ها (نزدیک ۴KB) را می دهد در حالی که Web storage در HTML5 حداکثر ۵MB داده را ذخیره می کند.

 

دو نوع از Web storage در HTML5 وجود دارد که در محدوده و طول عمر متفاوت اند :

  • Local storage (ذخیره سازی محلی) – از آبجکت localStorage برای ذخیره داده برای کل وبسایت بصورت دایمی استفاده می شود.

به این معنا که داده های ذخیره شده بصورت محلی در روز بعد, هفته بعد, یا سال بعد در صورتی که حذف نکنیم, در دسترس خواهند بود.

  • Session Storage – از آبجکت sessionStorage برای ذخیره داده بصورت موقت, برای هر پنجره جدا (یا تب) استفاده می شود.

زمانی که کاربر تب یا پنجره مربوط به آن صفحه را بست, سیشن ها نیز از بین می روند.

حتما بخوانید  آموزش HTML - کش کردن با HTML5

نکته: قابلیت Web storage در HTML5 در تمام مرورگرهای مدرن مثل فایرفاکس, کروم, اپرا, سافاری و اینترنت اکسپلورر ۸+ پشتیبانی می شود.

 

آبجکت localStorage

همانطور که در ابتدا گفته است, آبجکت localStorage داده ها را بدون هیچ تاریخ انقضایی ذخیره می کند. هر تکه از داده های ذخیره شده بصورت جفت کلید/مقدار هستند.

کلید ها (key) مشخص کننده نام داده (مثلا ‘email’) و مقدار (value) نیز مشخص کننده مقدار آن کلید هستند (مثلا ’netparadis@gmail.com’ )

توضیح مثال بالا:

کد جاوااسکریپت بالا به این معناست :

  • localStorage.setItem(key, value) : یک مقدار را به همراه کلید آن ذخیره می کند
  • localStorage.getItem(key) : مقدار یک کلید ذخیره شده را دریافت می کند.

شما همچنین می توانید یک آیتم مشخص را از فضای ذخیره سازی فقط با دادن نام کلید به متد removeItem() حذف کنید مثل localStorage.removeItem(key) .

به هر حال, اگر می خواهید کل داده های ذخیره شده را یکجا حذف کنید از متد clear() بصورت localStorage.clear() استفاده کنید.

متد clear() کل جفت کلید/مقدار ها را از فضای ذخیره سازی محلی, یکجا حذف می کند, پس قبل از استفاده از آن خوب فکر کنید.

حتما بخوانید  آموزش HTML - پخش ویدئو در HTML

نکته: داده های web storage (هر دو محلی و سیشن) بین مرورگرها در دسترس نیستند, برای مثال داده ذخیره شده در فایرفاکس نمی تواند در مرورگر کروم یا غیره قابل دسترس باشد.

 

آبجکت sessionStorage

آبجکت sessionStorage همانند localStorage کار می کند, با این تفاوت که داده ها را فقط در یک سیشن ذخیره می کند. بنابراین داده فقط تا زمانی که تب یا پنجره مرورگر بسته نشده باشد در دسترس خواهند بود.

 

امیدوارم در این بخش آموزش HTML , از آموزش ذخیره اطلاعات با web storage در HTML5 نهایت استفاده را برده باشید.

در بخش بعدی با کش کردن در HTML آشنا می شویم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

اگر مفید بود, لطفا به اشترک بگذارید تا دوستان دیگر نیز بهره ببرند

حسن شفیعی
مدرس ، پنتستر ، توسعه دهنده اپلیکیشن های تحت وب ، عضو مرکز حامی نخبگان و از مدیران و اعضای رسمی تیم امنیتی آشیانه هستم . علاقه خاصی به زبان های تحت وب, امنیت شبکه و لینوکس دارم و هر روز تلاش می کنم به این حوزه ها مسلط تر شوم و اطلاعاتم را در وب به اشتراک بگذارم

دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

جدیدترین آموزش های آنلاین



دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

سورس فروشگاهی دیجی کالا

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما

logo-samandehi

دانلود کتاب

عضویت رایگان خبرنامه