حافظه محلی HTML5

حافظه محلی HTML5 جایگزینی برای کوکی ها است که به برنامه های وب امکان می‌دهد اطلاعات کاربر را در مرورگر خود ذخیره کنند.

ذخیره سازی محلی HTML5 در مقابل کوکی‌ها

حافظه محلی نوعی ذخیره سازی آفلاین HTML5 است که به شما امکان می‌دهد داده‌های رشته کاربر را همزمان در مرورگر خود ذخیره کند. اطلاعات در name and value نگهداری می‌شوند و بین مرورگرهای مختلف در یک دستگاه در دسترس نیستند.

اگر می‌خواهید به سرعت بفهمید که آیا مرورگری که در حال حاضر از آن استفاده می‌کنید از حافظه محلی HTML5 پشتیبانی می‌کند یا خیر ، F12 را فشار دهید و این مورد را در کنسول مرورگر خود وارد کنید:

if(typeof(Storage) !== "undefined") {
  console.log("Local storage is supported.");
  // Local storage is available on your browser
} else {
  console.log("Local storage is not supported.");
  // The condition isn't met, meaning local storage isn't supported
}

از فضای ذخیره سازی محلی می‌توان به عنوان جایگزینی برای کوکی‌ها استفاده کرد. فرصتی برای ذخیره اطلاعات بیشتر فراهم می‌کند: 4KB حد مجاز کوکی‌ها است و فضای ذخیره سازی محلی بسته به مرورگر امکان استفاده از حداکثر 10 مگابایت را فراهم می‌کند. علاوه بر این ، روند کارایی بیشتری دارد – مرورگر در هر مرحله هیچ داده ذخیره محلی را به سرور نمی‌فرستد. برای خواندن مقالات در زمینه  CSS و کسب اطلاعات در این زمینه به شما پیشنهاد می‌کنیم مقالات این دسته از سایت دویکس را مطالعه کنید.

ذخیره سازی محلی:

• معرفی: در HTML5 معرفی شد.
• ذخیره سازی: داده‌ها به صورت محلی در مرورگر، در حافظه پنهان (cache) ذخیره می‌شوند.
• ظرفیت: تا 5 مگابایت برای هر دامنه (origin) قابل ذخیره سازی است.
• نوع داده: می‌تواند انواع مختلف داده‌ها مانند رشته‌ها، اعداد، آرایه‌ها و اشیاء را ذخیره کند.
• امنیت: امن‌تر از کوکی‌ها است، زیرا داده‌ها فقط برای وب سایتی که آنها را ذخیره کرده قابل دسترسی هستند.
• کاربرد: برای ذخیره سازی داده‌های دائمی مانند تنظیمات کاربر، تاریخچه جستجو و داده‌های برنامه وب استفاده می‌شود.
• معایب: از کوکی‌ها جدیدتر است و ممکن است در همه مرورگرها به طور کامل پشتیبانی نشود.

کوکی ها:

• معرفی: در اوایل دهه 1990 معرفی شدند.
• ذخیره سازی: داده‌ها در سرور ذخیره می‌شوند و به مرورگر ارسال می‌شوند.
• ظرفیت: تا 4 کیلوبایت برای هر کوکی قابل ذخیره سازی است.
• نوع داده: فقط می‌توانند رشته‌ها را ذخیره کنند.
• امنیت: کمتر امن از ذخیره سازی محلی هستند، زیرا داده‌ها می‌توانند توسط سایر وب سایت‌ها یا اشخاص ثالث رهگیری شوند.
• کاربرد: برای ذخیره سازی داده‌های موقت مانند اطلاعات ورود به سیستم، تنظیمات زبان و ردیابی سبد خرید استفاده می‌شود.
• مزایا: سازگاری گسترده با مرورگرها و وب سایت‌ها دارند.

در اینجا خلاصه‌ای از تفاوت‌های کلیدی بین ذخیره سازی محلی و کوکی ها آمده است:

انتخاب بین ذخیره سازی محلی و کوکی ها:

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

• از ذخیره سازی محلی برای:
  • ذخیره سازی داده‌های دائمی که باید در چندین جلسه مرورگر حفظ شوند.
  • ذخیره سازی داده‌های حساس که باید از دسترسی غیرمجاز محافظت شوند.
  • ذخیره سازی انواع مختلف داده مانند آرایه‌ها و اشیاء.
• از کوکی ها برای:
  • ذخیره سازی داده‌های موقت که فقط برای یک جلسه مرورگر مورد نیاز هستند.
  • ذخیره سازی اطلاعات ورود به سیستم و تنظیمات زبان.
  • ردیابی سبد خرید و تاریخچه مرور.

اشیا St ذخیره سازی محلی

حافظه محلی HTML5 داده ها را در دو شی JavaScript نگهداری می کند. هر دوی آن‌ها به یک روش و در سطح جهانی در دسترس هستند:

ذخیره سازی محلی

شی JavaScript localStorage داده‌هایی را که منقضی نمی شوند ذخیره می‌کند. حتی اگر جلسه را با بستن مرورگر خود به پایان برسانید و تا زمانی که آن را به صورت دستی حذف نکنید، در دسترس خواهد بود.

در مثال کد زیر ، می توانید یک جفت نام و مقدار “name” ، “John” را ببینید که در localStorage تشکیل شده است. سپس ، مقدار بازیابی شده و در یک عنصر HTML با شناسه res نمایش داده می‌شود.

// Stores the item data
localStorage.setItem("name", "John");
// Retrieves the data
document.getElementById("res").innerHTML = localStorage.getItem("name");

در اینجا روش دیگری برای انجام همان کار وجود دارد:

// Stores the item data
localStorage.name = "John";
// Retrieves the data
document.getElementById("res").innerHTML = localStorage.name;

در مثال بعدی ، ما نام را از شی localStorage حذف خواهیم کرد:

localStorage.removeItem("name");

از LocalStorage همچنین می‌توان برای تعداد دفعات کلیک یک عنصر در طول چندین جلسه در یک مرورگر استفاده کرد. ببینید که چگونه از متغیر کلیک در قطعه کد زیر استفاده می‌کنیم:

if (sessionStorage.clicks) {
    localStorage.clicks = Number(localStorage.clicks) + 1;
} else {
    localStorage.clicks = 1;
}
document.getElementById("result").innerHTML = sessionStorage.clicks + " click(s).";

ذخیره جلسه

برای ذخیره داده‌های یک جلسه در حال انجام ، می‌توانید از شی sessionStorage استفاده کنید. این داده‌ها پس از پایان جلسه حذف می‌شوند ، یعنی کاربر پنجره را می‌بندد یا از سیستم خارج می‌شود.

بیایید ببینیم چگونه می توان از شی session sessionStorage برای محاسبه تعداد دفعات کلیک یک عنصر در طول یک جلسه استفاده کرد:

if (sessionStorage.clicks) {
    sessionStorage.clicks = Number(sessionStorage.clicks) + 1;
} else {
    sessionStorage.clicks = 1;
}
document.getElementById("result").innerHTML = sessionStorage.clicks + " click(s) during this session.";

نکات مهم فضای ذخیره سازی محلی HTML5

• درست مانند کوکی‌ها ، از حافظه آفلاین HTML5 نباید برای ذخیره اطلاعات حساس (به عنوان مثال شناسه کاربر یا اطلاعات پرداخت) استفاده شود. هر اسکریپت JS می تواند به راحتی به آن دسترسی داشته باشد و در صورت حمله اسکریپت نویسی به خطر بیفتد.
• هنگام بارگیری پرونده‌های عظیم ، ممکن است با خطایی به نام Out of HTML5 Offline Storage Space مواجه شوید. اگر این اتفاق افتاد ، کوکی‌ها و داده‌های جلسه را با استفاده از تنظیمات در مرورگر خود حذف کنید ، دستگاه خود را دوباره راه اندازی کنید و دوباره امتحان کنید.
• کارگران وب نمی‌توانند از داده‌های ذخیره شده در حافظه محلی در HTML استفاده کنند.