سال های طولانی طراحان سایت برای ذخیره سازی اطلاعات روی سیستم کاربران از کوکی ها استفاده می کردند. از زمان ورود HTML5 به مرورگرها، امکانی به نام local storage معرفی شد. امکانی که به دلیل دارا بودن شباهت هایی با کوکی ها بسیاری از افراد به اشتباه آن را جایگزین کوکی ها می دانند.

در ادامه مطلب با ما باشید ...

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

تفاوت هایی هم در این دو تکنیک وجود دارد: 
- هر کوکی می تواند 4096 بایت (در حقیقت 4095 بایت) اطلاعات را نگهداری کند. در حالیکه لوکال استوریج ها به بزرگی 5 مگابایت در هر دامنه هستند. 
- کوکی ها تاریخ انقضا دارند. اما لوکال استوریج ها فقط به وسیله جاوااسکریپت و یا به صورت دستی توسط کاربر با خالی کردن کش حذف می شوند.

در ادامه مطلب با یک مثال، نحوه استفاده از لوکال استوریج را مرور خواهیم کرد.

ایجاد یک تودو (to-do) لیست ساده

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

گ های HTML فوق حاوی موارد زیر هستند: 
- یک تگ input برای نوشتن یک مورد جدید 
- یک دکمه برای افزودن مورد جدید 
- یک دکمه برای حذف تمام موارد لیست 
- یک لیست ul برای نمایش لیست موارد ذخیره شده 
- و در نهایت یک تگ div برای نمایش پیغام خطا زمانی که هیچ متنی برای اضافه شدن وارد نشده باشد.

برای ساختن این لیست از کتابخانه جی کوئری استفاده شده است.

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

همانطور که مشاهده می کنید، رویداد تایید فرم را به وسیله جی کوئری تشخیص داده و خصوصیت پیش فرض آن را با دستور return false غیر فعال می کنیم. در صورتیکه هیچ متنی در کادر مربوطه وارد نشده باشد، کاربر یک پیغام خطا مشاهده خواهد کرد.

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

با استفاده از دستور localStorage.setItem می توانیم اطلاعات را در لوکال استوریج ذخیره کنیم. این دستور 2 پارامتر دارد که اولین، نام یا کلید اطلاعات و دومین پارامتر اطلاعاتی است که باید ذخیره شوند.

برای خواندن اطلاعاتی که داخل لوکال استوریج ذخیره شده اند می توانیم از دستور localStorage.getItem استفاده کنیم.

بنابراین با هر بار مراجعه به این صفحه، اطلاعات ذخیره شده نمایش داده خواهند شد.

درصورتیکه روی دکمه حذف کلیک شود، دستور window.localStorage.clear تمامی اطلاعات لوکال استوریج را حذف خواهد کرد.

پس از قرار دادن کدهای فوق در کنار یکدیگر، می توانیم از این نرم افزار ساده استفاده نماییم:

خوشبختانه اکثر مرورگرها و اینترنت اکسپلورر 8 به بالا از لوکال استوریج پشتیبانی می کنند.

فایل دموی این مثال را می توانید از این آدرس دانلود کنید.

لوکال استوریج جایگزین مناسبی برای بسیاری از مواردی است که در گذشته مجبور بودیم از کوکی ها یا دیتابیس استفاده کنیم. به نظر شما کدام بخش وب سایت ها (نرم افزارهای مبتنی بر وب) را می توانیم با کمک این تکنیک ایجاد نماییم؟

طبق همیشه منابع :

1- Nardebaan

2 - webdesignerdepot

موفق باشید