بخش های اصلی

آموزش HTML 5

آموزش HTML 5 - ذخیره سازی اطلاعات (Web Storage)

فضای ذخیره سازی وب (web storage) در HTML5برای ذخیره داده در مرورگر کاربر استفاده می شه.

فضای ذخیره سازیِ وب چیه؟

وِیژگیِ فضای ذخیره سازیِ وب به شما این امکان را میده که بتوانید برخی اطلاعات محلی (locall) را روی کامپیوترِ کاربر ذخیره کنین، بسیار شبیه به cookieهاست ولی امنیت و سرعت بیش تری داره. اطلاعات ذخیره شده در فضای ذخیره سازی وب، به وب سرور فرستاده نمیشن درست برعکس coockieها که با هر درخواست، اطلاعات به سرور فرستاده میشن. همچنین، درحالی که coockieها اجازه ذخیره سازیِ مقدار کمی داده را میدن (حدود 4KB)T ، فضای ذخیره سازی وب، به شما امکان ذخیره سازی بیش تر از5MB داده میده.

دو نوع فضای ذخیره سازیِ وب هست که هر کدام در دامنه (scope) و طول عمر (lifetime) با هم فرق می کنن:

  • فضای ذخیره سازی محلی (Local storage)–فضای ذخیره سازی محلی برای ذخیره سازی داده بصورت دائمی در تمام وب سایت تان، از شیء localStorage استفاده می کنه. به این معنی که داده ی ذخیره شده ی محلی را اگه پاکش نکنین، تا روز بعد، هفته ی بعد، یا سال بعد ، میماند.
  • فضای ذخیره سازیِ جلسه (Session storage)– فضای ذخیره سازیِ جلسه از شیء sessionStorage برای ذخیره سازیِ داده بصورت موقت، برای یک پنجره ی مفرد (یا زبانه (tab))، استفاده می کنه. زمانی که جلسه تمام بشه، مثل زمانی که کاربر پنجره (یا زبانه) را ببنده، داده هم پاک میشه.

نکته: تمام مرورگرهای مطرح مدرن مثل Firefox، Chrome، Opera، Safari و Internet Explorer 8+، از ویژگی فضای ذخیره سازی وبِ HTML5 پشتیبانی می کنن.

شیء localStorage

همانطور که قبلاً گفته شد، شیء localStorage، داده را بدون تاریخ انقضا ذخیره می کنه. هر داده در یک جفت کلید/مقدار (key/value)ذخیره می شه. کلید (key) نام اطلاعات (مثل ‘first_name) را مشخص می کنه و مقدار (value)، مقداریه که به کلید تخصیص داده میشه (مثل ‘peter’).

مثال

<script type="text/javascript">
// Check if the localStorage object exists
if(localStorage){
    // Store data
    localStorage.setItem("first_name", "Peter");
 
    // Retrieve data
    alert("Hi, " + localStorage.getItem("first_name"));
} else{
    alert("Sorry, your browser do not support local storage.");
}
</script>

توضیح مثال بالا:

کد جاوا اسکریپتِ بالا به معنیِ زیره:

  •      localStorage.setItem(key, value): مقداری را که به یک کلید تخصیص داده شده، ذخیره می کنه
  •      localStorage.getItem(key): مقدار اختصاص داده شده به کلید را برمی گردانه.

می توانید با پاس دادن کلید (key) به متدِ removeItem()، یک آیتمِ خاص را از فضای ذخیره سازی حذف کنین، مثل localStorage.removeItem(key).

اگه میخواید کل فضای ذخیره سازی را حذف کنین، از متد clear() استفاده کنین، مثل متدِ localStorage.clear(). The clear() که همه ی جفت های کلید/مقدار (key/value) را یکمرتبه از فضای ذخیره سازی حذف می کنه، پس قبل از استفاده از آن با دقت فکر کنین.

نکته: داده ی فضای ذخیره سازیِ وب (هم local و هم session) در یک مرورگر، برای مرورگرهای مختلف دیگه موجود نخواهند بود، مثلاً داده ی ذخیره شده در مرورگر Firefox در Google Chrome، Internet Explrer، یا مرورگرهای دیگه وجود نخواهد داشت.

شی sessionStorage

شی sessionStorage، به روشی مشابهِ localStorage کار می کنه، بجز این که این شیء داده را فقط برای یک جلسه (session) ذخیره می کنه، مثلاً داده تا زمانی که کاربر، پنجره یا زبانه (tab) را ببنده، باقی میماند.

مثال

<script type="text/javascript">
// Check if the sessionStorage object exists
if(sessionStorage){
    // Store data
    sessionStorage.setItem("last_name", "Parker");
 
    // Retrieve data
    alert("Hi, " + localStorage.getItem("first_name") + " " + sessionStorage.getItem("last_name"));
} else{
    alert("Sorry, your browser do not support session storage.");
}
</script>

مبحث آموزشی

آموزش HTML 5

Learn HTML 5

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد