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

منظور از web storage در HTML

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

منظور از web storage در HTML چیست؟ چگونه می‌توانیم از ذخیره سازی وب در HTML استفاده کنیم؟ در این مقاله می‌خواهیم در رابطه با web storage در HTML صحبت کنیم.

ذخیره سازی تحت وب چیست؟

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

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

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

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

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

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

  • localstorage – ذخیره داده ها بدون تاریخ انقضاء
  • sessionstorage – ذخیره داده ها برای یک جلسه(session)، داده ها هنگام بسته شدن تب مرورگر از بین می روند.

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

 if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage sup
port..
}

آبجکت localstorage

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

// Store
localStorage.setItem("lastname", "Smith");

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

ساخت یک جفت کلید/مقدار با نام lastname و مقدار smith

بازگرداندن مقدار کلید lastname و اضافه کردن آن به عنصر با شناسه result

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

// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

روش حذف کلید lastname از localstorage به شکل زیر است:

localStorage.removeItem("lastname");

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

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

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

آبجکت sessionstorage

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

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

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

پایان ترم

[box type=”info” class=”question-from-users” width=””]

از ذخیره سازی تحت وب در چه مواردی استفاده می‌شود؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

در این مقاله از فصل آشنایی با API ها در HTML ، با ذخیره سازی وب یا Web Storage آشنا شدیم.

امیدوارم این مقاله از مجموعه آموزش های متنی HTML براتون مفید بوده باشه و اگر سوال، پیشنهاد یا انتقادی داشتید حتما بپرسید. من قول میدم که در اولین فرصت بهتون پاسخ بدم.

تا مقاله بعدی …

فیلم آموزشی asp.net core 2

علی اسماعیلی
درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم…
سرفصل های آموزش HTML
پایین سرفصل های HTML هست، روی منم کلیک کنی میتونی ببینی.
فصل ۸ – کار با جدول در HTML

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

بدون نظر

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

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=