آموزش 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 برای ذخیره داده بصورت موقت, برای هر پنجره جدا (یا تب) استفاده می شود.

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

نکته: قابلیت 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() کل جفت کلید/مقدار ها را از فضای ذخیره سازی محلی, یکجا حذف می کند, پس قبل از استفاده از آن خوب فکر کنید.

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

 

آبجکت sessionStorage

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

 

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

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

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

موفق باشید.

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

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

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

    دوره های آموزشی

    می خواهید صفر تا صد HTML,CSS را یاد بگیرید ؟

    50% تخفیف ویژه
    فقط 144 هزار تومان

    برای دریافت آموزش طراحی سایت با پروژه قالب فروشگاه روی دکمه زیر بزنید
    می خواهم طراحی سایت را یاد بگیرم
    close-link