بهترین سایت برای توسعه دهندگان وب

دروس HTML5

شروع HTML مقدمه HTML ویرایشگران HTML مثالهای اساسی HTML المان های HTML ویژگی های HTML عناوین HTML بندهای HTML سبک های HTML قالب بندی HTML نقل قول های HTML نظرات HTML رنگهای HTML HTML و CSS پیوندهای HTML تصاویر HTML جداول HTML لیست های HTML بلوک های HTML کلاس های HTML شناسه های HTML فریم های HTML HTML و JavaScript مسیرهای پرونده HTML HTML قسمت هدینگ چیدمان های HTML HTML پاسخگو کد رایانه HTML موجودیت HTML نمادهای HTML رمزگذاری HTML رمزگذاری URL HTML HTML و XHTML

HTML فرم ها

فرم های HTML المان های فرم HTML انواع ورودی HTML صفات ورودی HTML

HTML5

مقدمه HTML5 پشتیبانی HTML5 المان های جدید HTML5 المان های معنایی HTML5 مهاجرت از HTML4 راهنمای سبک HTML5

HTML گرافیک

HTML Canvas HTML SVG

HTML رسانه

چندرسانه ای HTML ویدیوی HTML صوت HTML افزونه های HTML یوتیوب HTML

HTML API

مکان جغرافیایی HTML کشیدن / رها کردن HTML HTML ذخیره وب HTML کارهای وب HTML و SSE

HTML مثال

مثالهای HTML آزمون ها HTML تمرینات HTML گواهی HTML خلاصه HTML قابلیت دسترسی به HTML

HTML منابع

لیست برچسب های HTML صفات HTML صفات جهانی HTML رویدادهای HTML رنگهای HTML کانواس HTML صوتی / تصویری HTML نسخه معتبر HTML مجموعه نویسه های HTML رمزگذاری URL HTML رمزگذاری زبان HTML پیام های HTTP روشهای HTTP مبدل PX به EM میانبرهای صفحه کلید

HTML5 درسهایی برای مبتدیان

HTML5 ذخیره سازی وب


ذخیره سازی وب HTML؛ بهتر از کوکی.


HTML Web Storage چیست؟

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

قبل از HTML5 ، داده های برنامه باید در کوکی ها ، در هر درخواست سرور ، ذخیره می شد. فضای ذخیره سازی وب از امنیت بیشتری برخوردار است و مقدار زیادی داده می تواند به صورت محلی ذخیره شود ، بدون اینکه بر عملکرد وب سایت تأثیر بگذارد.

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

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


پشتیبانی مرورگر

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که به طور کامل از Web Storage پشتیبانی می کند.

API Chrome Edge Firefox Safari Opera
ذخیره سازی وب 4.0 8.0 3.5 4.0 11.5

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

ذخیره سازی وب HTML دو شی را برای ذخیره داده ها در مشتری فراهم می کند:

  • window.localStorage داده ها را بدون تاریخ انقضا ذخیره می کند
  • window.sessionStorage داده های یک جلسه را ذخیره می کند (با بسته شدن برگه مرورگر داده از بین می رود) .

قبل از استفاده از حافظه وب ، پشتیبانی مرورگر را برای localStorage و sessionStorage بررسی کنید:

if (typeof(Storage) !== "undefined") {
  // کد برای localStorage/sessionStorage.
} else {
  // متاسف! بدون پشتیبانی از ذخیره سازی وب ..
}

شی LocalStorage

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

مثال

// ذخیره می کنیم
localStorage.setItem("lastname", "Smith");

// بر میگردیم
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
خودتان آزمایش کنید »

توضیح مثل

  • یک جفت نام / مقدار localStorage با نام = "نام خانوادگی" و مقدار = "اسمیت" ایجاد کنید
    localStorage name/value (معنی نام) с name="lastname" و value="Smith";
  • مقدار "نام خانوادگی" را بازیابی کرده و با id = "result" در عنصر قرار دهید

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

// Сохраняем
localStorage.lastname = "Smith";
// Извлекаем
document.getElementById("result").innerHTML = localStorage.lastname;

نحو حذف آیتم local storage "ذخیره" "نام خانوادگی" به شرح زیر است:

localStorage.removeItem("lastname");

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

مثال زیر تعداد دفعات کلیک کاربر بر روی یک دکمه را محاسبه می کند. در این کد رشته مقدار به یک عدد تبدیل می شود تا بتواند شمارنده را افزایش دهد:

مثال

if (localStorage.clickcount) {
  localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
  localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "دکمه را فشار بدهید " +
localStorage.clickcount + " time(s).";
خودتان آزمایش کنید »

آبجکت sessionStorage

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

مثال زیر تعداد دفعات کلیک کاربر بر روی یک دکمه را در جلسه فعلی محاسبه می کند:

مثال

if (sessionStorage.clickcount) {
  sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
  sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = " دکمه را فشار دهید " +
sessionStorage.clickcount + " time(s) in this session.";
خودتان آزمایش کنید »





این سایت برای آموزش ، آزمایش و یادگیری بهینه شده است. نمونه ها را می توان برای بهبود ساده کرد خواندن و درک اساسی. آموزشها ، پیوندها و مثالها مرتباً تجدید نظر می شوند تا از آنها جلوگیری شود خطاها ، اما ما نمی توانیم صحت و عملکرد کامل همه مطالب را تضمین کنیم. با استفاده از این سایت ، شما موافقت می کنید که مطالعه کرده اید و پذیرفته ایدمقررات استفاده , کوکی و سیاست های حفظ حریم خصوصی. کپی رایت 1999-2020 حق چاپ و .. محفوظ توسط احمد فرجی
سایت توسط چارچوب farsiw3.ir طراحی شده است.

Farsiw3.ir