استفاده از LocalStorage با JavaScript

زمانی که شروع به یادگیری جاوا اسکریپت میکنید، ممکنه ساخت یک اپلیکیشن to-do اولین کاری باشه که شما انجام میدین اما پس از رفرش کردن صفحه، میبینید تمام مواردی که در لیست to-do خودتون وارد کرده بودین کاملا ناپدید شدن. با استفاده از Local Storage میتونیم این مشکلات رو به راحتی برطرف کنیم.

دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا

افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی

خرید کلاس آنلاین

افزونه فرم ساز آسان
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس

خرید ورق گالوانیزه رنگی
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت

دانلود آهنگ

کارگاه رویه کوبی در تهران
بهترین کارگاه رویه کوبی و تعمیر مبل راحتی و استیل در تهران با قیمت و کیفیت عالی

شماره شبا

خودتان را اینجا معرفی کنید

راحت ترین راه برای رفع این مشکل استفاده از Local Storage هست، یکی از خوبی های Local Store این هست که میتونین داده هاتون رو در کامپیوتر کاربر ذخیره کنید بنابراین وقتی کاربر صفحه ی وب رو رفرش کنه تغییری در داده های قبلی به وجود نمیاد.

Local Storage دقیقا چی هست ؟

Local Storage بخشی از Web Storage هستش، در واقع میشه گفت بخشی از HTML5 هست.
Local Storage داده هارو با تاریخ انقضای نامحدود ذخیره میکنه و ما از این قابلیت استفاده میکنیم چونکه میخوایم داده هامون تا حداکثر زمانی که امکان داره در کامپیوتر کاربرمون وجود داشته باشه اما برای مثال Session Manager داده هارو فقط در یک Session ذخیره میکنه بنابراین اگه کاربر تب مورد نظر رو ببنده و یک تب جدید باز کنه تمام داده های ما از بین میرن.
به بیان ساده تر، کاری که Web Storage انجام میده اینه که داده هایی از نوع Key / Value Pairs ذخیره میکنه و برخلاف Cookies این داده ها حتی با بستن مرورگر و یا حتی خاموش کردن کامپیوتر وجود دارن.

قطعه کد HTML

اگر ما به یه لیست to-do فکر کنیم، چیزهایی شبیه این اینها رو نیاز داریم :
یک فیلد برای وارد کردن to-do
یک دکمه برای ثبت کردن to-do مورد نظرمون
یک دکمه برای پاک کردن تمام to-do ها
یک لیست نامرتب برای قراردادن to-do ها
و در نهایت یک قسمتی برای اخطار دادن به کاربر هنگام وارد کردن مقدار خالی در لیست to-do
بنابراین کد HTML ما به صورت زیر میشه :

<span style="font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 18px;"><section>
</span><span style="font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 18px;">  <form id="form" action="#" method="POST">
</span><span style="font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 18px;">  <input id="description" name="description" type="text" />
</span><span style="font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 18px;">  <input id="add" type="submit" value="Add" />
</span><span style="font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 18px;">  <button id="clear">Clear All</button>
</span><span style="font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 18px;">  </form>
</span><span style="font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 18px;">  <div id="alert"></div>
</span><span style="font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 18px;">  <ul id="todos"></ul>
</span><span style="font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 18px;"></section></span>

با کمک جاوا اسکریپت میتونیم تمام فیلدهای بالا رو به صورت داینامیک تغییر بدیم. از اونجایی که پس از این کد میخوایم از جی کوئری استفاده کنیم بنابراین بهتره که داکیومنت جی کوئری رو در پروژه ی خودتون فراخوانی کنین.

قطعه کد جاوا اسکریپت

اگر میخوایم که یک ساختار برای یک اپلیکیشن to-do بسازیم اولین کاری که باید بکنیم این هست که حواسمون باشه که کاربر مقدار خالی برای فیلدی که داریم وارد نکنه، بنابراین این قطعه کد رو مینویسیم :

$('#add').click( function() {
   var Description = $('#description').val();
   //if the to-do is empty
   if($("#description").val() == '') {
    $('#alert').html("<strong>Warning!</strong> You left the to-do empty");
    $('#alert').fadeIn().delay(1000).fadeOut();
    return false;
   }

در قطعه کد بالا، زمانی که کاربر روی دکمه add کلیک کنه، یک تست ساده انجام میشه در مورد مقداری که کاربر در فیلد وارد کرده و اگر خالی باشه یک div برای 1 ثانیه نمایش داده میشه، در نهایت یک return false قرار میدیم تا مرورگر از خواندن ادامه ی اسکریپت صرف نظر کنه.
سپس، مقادیری که از کاربر میگیریم رو در یک لیست نمایش میدیم، مقادیر به اول لیست ما اضافه میشن و بعد آیتم هارو در Local Storage ذخیره میکنیم.

   // add the list item
   $('#todos').prepend("<li>" + Description + "</li>");
   // delete whatever is in the input
   $('#form')[0].reset();
   var todos = $('#todos').html();
   localStorage.setItem('todos', todos);
   return false;
});

قطعه کد بالا یک قطعه کد استاندارد جی کوئری هست و وقتی که داده ها وارد Local Storage میشوند باید Key و Value آنها را ذخیره کنیم. Key نامی هست که خودمون انتخاب میکنیم و در این مثال todos برابر key خواهد بود، سپس باید مشخص کنیم که دقیقا چه چیزی رو میخوایم ذخیره کنیم، در این مثال تمام HTML ای که در داخل لیست نامرتب ما وجود داره باید ذخیره بشه، درنهایت هم یک return false میزاریم برای اینکه فرم submit نشه و صفحه رفرش نشه.
قدم بعدی این هست که ببینیم از قبل چیزی درون Local Storage داریم یا نه و اگر داشتیم اون مقادیر رو میگیریم و درون صفحه در لیست نامرتبمون نشون میدیم، با این قطعه کد این کار رو به راحتی میتونیم انجام بدیم

// if we have something on local storage place that
if(localStorage.getItem('todos')) {
$('#todos').html(localStorage.getItem('todos'));
}

ما با یک شرط ساده وجود داشتن مقدار رو چک کردیم و بعد هرچیزی که در Local Storage وجود داشت رو گرفتیم و اون رو درون لیست نامرتبمون جاگذاری کردیم.
حالا اگر صفحه رو رفرش کنید میبینید تمام مواردی که قبلا وارد کردید وجود داره و نمایش داده میشه مگر اینکه کاربر تصمیم بگیره با کلیک روی دکمه Clear همه ی اونها رو پاک کنه. وقتی کاربر این کار رو انجام بده، ما تمام Local Storage رو پاک میکنیم و صفحه رو رفرش میکنیم و در نهایت return false میزاریم برای اینکه از قرار گرفتن هش یا علامت # در url جلوگیری کنیم.

// clear all the local storage
$('#clear').click( function() {
window.localStorage.clear();
location.reload();
return false;
});

به همین سادگی اپلیکیشن Local Storage ما به خوبی کار میکنه، قطعه کد کاملی که نوشتیم به صورت زیر هست

$('#add').click( function() {
   var Description = $('#description').val();
  if($("#description").val() == '') {
    $('#alert').html("<strong>Warning!</strong> You left the to-do empty");
    $('#alert').fadeIn().delay(1000).fadeOut();
    return false;
   }
   $('#todos').prepend("<li><input id='check' name='check' type='checkbox'/>" + Description + "</li>");
   $('#form')[0].reset();
   var todos = $('#todos').html();
   localStorage.setItem('todos', todos);
   return false;
});

if(localStorage.getItem('todos')) {
$('#todos').html(localStorage.getItem('todos'));
}

$('#clear').click( function() {
window.localStorage.clear();
location.reload();
return false;
});

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

به خوبی از Local Storage در مرورگرها پشتیبانی میشه، تمام مرورگرها حتی IE8 هم از Local Storage پشتیبانی میکنند، تنها چیزی که ممکنه شمارو نگران کنه IE7 هست که البته اگر میخواین اپ شما به خوبی در IE7 کار کنه باید نگران این موضوع باشید!

نتیجه گیری

Local Storage در اپ های کوچیکی مانند این میتونه خیلی بهتر از Database باشه، برای ذخیره کردن تعدادی داده های کوچیک لازم نیست که یک دیتابیس بزرگ بسازید !

محمد بابازاده

محمد یه دانشجوی فناوری اطلاعات هست که از سال 92 فعالیتش رو شروع کرد، در حال حاضر در زمینه ی برنامه نویسی تحت وب و اندروید و شبکه های ارتباطی سیسکو فعالیت میکنه .

نظرات و سوالات کاربران

ارسال پاسخ

Aliakbar

یکشنبه ۲۲ مرداد ۱۳۹۶ ۱۴:۴۶

سلام! میتونیم از این local storage توی برنامه های موبایلی hybrid و داخل یه webview استفاده کنیم؟ من نتونستنم راهی هست؟