میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

ذخیره سازی وب در HTML

آشنایی با ذخیره سازی وب در HTML

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

قبل از html5، اپلیکیشن ها باید داده ها را در کوکی ها و در هر درخواست سرور قرار می دادند.

ذخیره سازی تحت وب امنیت بیشتری دارد و همچنان مقدار داده بیشتری را می توان به صورت محلی بدون تاثیر گذاشتن بر کیفیت اجرای وبسایت ذخیره کرد.

برخلاف کوکی ها، محدودیت ذخیره سازی مبتنی بر وب بسیار بیشتر است(حداقل ۵ مگابایت) و اطلاعات هیچ وقت به سرور منتقل نمی شوند.

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

 

 

آبجکت ذخیره سازی

این روش ذخیره سازی دو آبجکت برای ذخیره داده ها برروی کلاینت ارائه می دهد:

localstorage – ذخیره داده ها بدون تاریخ انقضاء

sessionstorage – ذخیره داده ها برای یک session، داده ها هنگام بسته شدن تب مرورگر از بین می روند.

قبل از استفاده از ذخیره سازی مبتنی بر وب، پشتیبانی مرورگر را برای localstorage و sessionstorage بررسی کنید:

 

if (typeof(Storage) !== “undefined”) {
  // Code for localStorage/sessionStorage.
} else {

  // Sorry! No Web Storage support..
}

آبجکت localstorage

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

localStorage.setItem(“lastname”“Smith”);

// Retrieve
document.getElementById(“result”).innerHTML = localStorage.getItem(“lastname”);

 

یک جفت نام / مقدار localStorage با name=”lastname  و value=”Smith ایجاد کنید
مقدار “lastname” را بازیابی کرده و با id = “result در عنصر قرار دهید

 

مثال بالا نیز می تواند به صورت زیر نوشته شود:

localStorage.lastname = “Smith”;
// Retrieve
document.getElementById(“result”).innerHTML = localStorage.lastname;

نحو حذف آیتم محلی ذخیره “lastname” به شرح زیر است:

localStorage.removeItem(“lastname”);

توجه: جفت نام / مقدار همیشه به عنوان رشته ذخیره می شوند. به یاد داشته باشید که در صورت لزوم آنها را به قالب دیگری تبدیل کنید!
مثال زیر تعداد دفعات کلیک کاربر بر روی یک دکمه را محاسبه می کند. در این کد رشته مقدار به یک عدد تبدیل می شود تا بتواند شمارنده را افزایش دهد:

if (localStorage.clickcount) {
  localStorage.clickcount = Number(localStorage.clickcount) + ۱;
else {
  localStorage.clickcount = ۱;
}
document.getElementById(“result”).innerHTML = “You have clicked the button “ +
localStorage.clickcount + ” time(s).”;

 

 

آبجکت sessionstorage

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

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

 

if (sessionStorage.clickcount) {
  sessionStorage.clickcount = Number(sessionStorage.clickcount) + ۱;
else {
  sessionStorage.clickcount = ۱;
}
document.getElementById(“result”).innerHTML = “You have clicked the button “ +
sessionStorage.clickcount + ” time(s) in this session.”;

 

 

 

 

امیدواریم این بخش از آموزش در مورد ذخیره سازی وب در Html نیز برای شما مفید واقع شده باشد و ما را در تلگرام و اینستاگرام دنبال کنید .

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید

بیشتر
تگ Canvas در Html
ارسال دیدگاه

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

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟