حافظه محلی HTML5

دسته بندی : آموزش HTML سطح مقاله : متوسط زمان مطالعه : 2 دقیقه 01 آذر 1399
حافظه محلی 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 مگابایت را فراهم می کند. علاوه بر این ، روند کارایی بیشتری دارد – مرورگر در هر مرحله هیچ داده ذخیره محلی را به سرور نمی فرستد.

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

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

طول عمردر دسترس برایموضوع
دائمیهمه ویندوزها یا برگه ها از یک دامنه استفاده می کنندlocalStorage
تا پایان جلسهیک پنجره یا برگه خاص و پنجره های بازشو آنsessionStorage

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

شی 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 استفاده کنند.

دوره رایگان html را در دویکس دنبال کنید.

چه امتیازی به این مقاله می دید؟

5 / 0
[ 0 رای ]
مطالب مشابه

Related Posts