17
تشکر

Web Storage در HTML5

HTML5

HTML5

برای ذخیره اطلاعات در سمت کاربر، تنها گزینه پیش روی ما استفاده از Cookie است. توسط Cookie ما میتوانیم اطلاعات را به صورت name/value ذخیره کنیم. اما Cookie دارای ضعفهایی نیز است. در Cookie تنها میتوان 4KB اطلاعات را ذخیره کرد و همچنین در هربار درخواست HTTP، اطلاعات کوکی نیز به سمت سرور فرستاده میشود. بنابراین حتی اگر محدودیت حافظه هم وجود نداشته باشد، باز هم استفاده از Cookie برای ذخیره اطلاعات در سمت کاربر کار اشتباهی است.

اما HTML5 ویژگی جدیدی به نام Web Storage را معرفی کرده است. Web Storage نیز مانند کوکی ها به صورت name/value هستند و مقدار حافظه آن‌ها به طور میانگین در مرورگهای مختلف 5MB برای هر دومین است، و همینطور اطلاعات آن‌ها به سمت سرور فرستاده نمیشود.

در ادامه این مطلب بیشتر با این ویژگی آشنا میشویم.

انواع Web Storage

Web Storage از دو نوع مختلف به نام های local storage و session storage تشکیل شده است. اطلاعات ذخیره شده در local storage تا زمانی که به صورت مستقیم حذف نشوند و یا Cache مروگر پاک نشود، باقی میمانند، که مانند Cookie رفتار میکند اما نمیتوان مثل Cookie در سمت سرور از آن استفاده کرد.

اما اطلاعات session storage مخصوص هر تب یا صفحه است. برای مثال اطلاعاتی که شما در session storage در یک صفحه ذخیره کردید، با بسته شدن آن صفحه، آن اطلاعات نیز حذف خواهند شد و حتی آن اطلاعات توسط صفحات دیگر همان دومین قابل دسترس نیستند.

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

بر خلاف آن چیزی که فکر میکنیم این ویژگی در تمامی مرورگرها پشتیبانی میشوند، به غیر از IE7 به پایین و نسخه های قدیمی Opera و Safari و Opera Mobile و همچنین تا آخرین نسخه Opera mini که پشتیبانی نمیشوند که البته میتوان آن‌ها را نادیده گرفت.

اطلاعات بیشتر

نحوه استفاده

نحوه استفاده از local storage و session storage مشابه یکدیگر است.

ذخیره اطلاعات

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

در مثال زیر ما اطلاعاتی را هم در session storage و هم در local storage ذخیره کردیم.

sessionStorage.setItem('foo', 'bar');
localStorage.setItem('foo', 'bar');

علاوه بر روش بالا از روش‌های زیر نیز میتوانید استفاده کنید.

sessionStorage.foo = 'bar';
localStorage.foo = 'bar';

sessionStorage['foo'] = 'bar';
localStorage['foo'] = 'bar';

ذخیره متغیرها و آرایه ها به سادگی انجام میپذیرد، اما برای ذخیره Objectها باید ابتدا آن‌ها را به متن تبدیل کنید.

var obj = {
  name: 'ali',
  age: 19
}
sessionStorage['foo'] = JSON.stringify(obj);

بازیابی اطلاعات

بازیابی اطلاعات توسط متد getItem انجام میشود. در صورتی که اطلاعات موجود نباشد، مقدار null برگردانده میشود.

var string = localStorage.getItem("foo");
var object = JSON.parse(sessionStorage.getItem("foo"));

همچنین میتوانید از دو روش دیگر نیز استفاده کنید.

var string = localStorage.foo;
var number = sessionStorage.foo;

var boolean = localStorage["foo"];
var object = JSON.parse(sessionStorage["foo"]);

حذف اطلاعات

حذف اطلاعات توسط متد removeItem انجام میشود.

localStorage.removeItem("foo");
sessionStorage.removeItem("foo");

توسط عمگلر delete نیز میتوان اینکار را انجام داد.

delete localStorage.key;
delete sessionStorage.foo;

delete localStorage["bar"];
delete sessionStorage["baz"];

همچنین توسط متد clear میتوانید تمام اطلاعات را از بین ببرید.

localStorage.clear();
sessionStorage.clear();

رویداد storage

توسط این رویداد میتوانید تغییراتی که درون local storage بوجود می‌آید را دریافت کنید. برای مثال کاربر دو صفحه متفاوت از سایت شما را باز کرده است. شما در یکی از این صفحات مقدار یکی از سطرهای local storage را تغییر میدهید با اینکار اطلاعات تغییر یافته در صفحه دیگر نیز بروز می‌شوند و شما میتوانید توسط رویداد storage این تغییر را handle کنید. مشاهده دمو

window.addEventListener("storage", function(event) {
 var key = event.key;
 var newValue = event.newValue;
 var oldValue = event.oldValue;
 var url = event.url;
 var storageArea = event.storageArea;

 // handle the event
});   

نتیجه‌گیری

توسط این ویژگی HTML5 که در بیشتر مرورگرها به خوبی کار میکند میتوانید کارهای متفاوتی انجام دهید. برای مثال تا زمانی که اینترنت کاربر قطع می‌شود میتوانید اطلاعات تغییر یافته را ذخیره کنید و پس از اتصال مجدد آن‌ها را اعمال کنید، یا درخواست های ajax خود را درون session storage ذخیره کنید تا زمانی که کاربر دوباره درخواست داد دیگر به سرور ارسال نکنید و… .

  • مرضیه می‌گه:

    سلام
    یه سوال داشتم، اینکه این کد زیر آیا به من فقط این مطلب را می رساند که این دو قابلیت فعال هستند یا نه؟
    ;sessionStorage = !!window.sessionStorage
    ;localStorage = !!window.localStorage

    ممنون میشم پاسخ را واسم ایمیل کنید.
    با تشکر قبلی از لطفتون

  • shaho می‌گه:

    سلام
    وب سایت خیلی مفید همراه با مطالب عالی دارید
    یک سوال: من زبان برنامه نویسی php همراه با css ، html و jquery را بلدم اما هنگام طراحی یک وب سایت دقیقا نمی دانم از کجا شروع کنم (طراحی قالب با فتوشاپ را بلد نیستم) میشه راهنمایی کنید اول از کجا شروع منم؟؟؟؟

    • محسن شفیعی می‌گه:

      خب اصولا نحوه راه اندازی یک سایت اینه که ابتدا شمای کلی سایت طراحی میشه بعد طرح نهایی اون در فتوشاپ یا هر نرم افزار دیگه طراحی میشه، بعد کدنویسی اون شروع میشه. حالا شما که طراحی بلد نیستید میتونید از فریم ورک های آماده CSS استفاده کنید که دارای تمپلیت هایی هم است، مثل Bootstarp یا foundation

  • سمیه می‌گه:

    مطالب جالبی رو عنوان کردی عالی بود مرسی


  • نظرات این مطلب بسته است.