ایجاد یک برنامه کاری معمولاً اولین برنامه‌ای است که یاد می‌گیرید چگونه در جاوا اسکریپت بسازید، اما مشکل همه آن برنامه‌ها این است که وقتی دوباره بارگیری می‌کنید page تمام آن کارهایی که باید انجام دهید از بین رفته اند.

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

ذخیره سازی محلی چیست؟

Local ذخیره سازی بخشی از ذخیره سازی وب است که خود بخشی از مشخصات HTML5 است. دو گزینه برای ذخیره داده ها در مشخصات وجود دارد:

• Local ذخیره سازی: داده ها را بدون تاریخ انقضا ذخیره می کند و این همان چیزی است که ما از آن استفاده خواهیم کرد زیرا می خواهیم کارهایمان باقی بمانند روی را page تا زمانی که ممکن است.
• Session Storage: داده ها را فقط برای یک جلسه ذخیره می کند، بنابراین اگر کاربر برگه را ببندد و دوباره آن را باز کند، تمام اطلاعات او از بین می رود.

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

HTML

اگر به فهرستی از کارهایی که باید انجام دهیم فکر کنیم، آنچه نیاز داریم این است:

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

بنابراین HTML ما باید چیزی شبیه به این باشد:

<section>
 <form id="form" action="#" method="POST">
 <input id="description" name="description" type="text" />
 <input id="add" type="submit" value="Add" />
 <button id="clear">Clear All</button>
 </form>
 <div id="alert"></div>
 <ul id="todos"></ul>
</section>

این یک HTML محل مکان بسیار استاندارد است و با جاوا اسکریپت ما می توانیم همه اینها را با محتوای پویا پر کنیم.

از آنجایی که در این مثال از jQuery استفاده خواهیم کرد، باید آن را در سند HTML خود نیز بگنجانید.

جاوا اسکریپت

اگر به ساختار یک برنامه ساده برای انجام کار فکر می کنیم، اولین کاری که باید انجام دهیم این است که بررسی کنیم که کاربر چه زمانی کلیک می کند. روی دکمه افزودن را بررسی کنید و بررسی کنید که آیا ورودی مقدار خالی دارد، مانند این:

$('#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;
 }

تنها کاری که انجام دادیم این بود که یک کلیک را بررسی کنیم روی دکمه افزودن را بزنید و یک تست ساده را اجرا کنید تا بررسی کنید که آیا کاربر ورودی را با چیزی پر کرده است یا خیر. اگر نه، div هشدار محو می شود و برای 1000 میلی ثانیه باقی می ماند و سپس محو می شود. در نهایت false را برمی گردانیم تا مرورگر بقیه اسکریپت را نخواند و همچنان آیتم لیست را اضافه کند.

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

 // 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;
});

همانطور که می بینید، جی کوئری بسیار استاندارد است و وقتی صحبت از فضای ذخیره سازی محلی می شود، باید یک کلید و یک مقدار ذخیره کنیم. کلید نامی است که برای خودمان تعیین می کنیم و در این مورد من آن را “todos” نامیدم و سپس باید مشخص کنیم که در واقع چه چیزی را می خواهیم ذخیره کنیم، و در این مورد این همه HTML است که در لیست نامرتب todos قرار می گیرد. . همانطور که می بینید ما فقط آن را با استفاده از jQuery گرفتیم و در نهایت false را برگرداندیم تا فرم ارسال نشود و ما page بارگذاری مجدد نمی شود

قدم بعدی ما این است که بررسی کنیم آیا چیزی داریم یا خیر روی حافظه محلی قبلاً در دستگاه ما ذخیره شده است و اگر این کار را انجام دادیم باید آن را در آن قرار دهیم page، بنابراین از آنجایی که ما نام کلید خود را todos دادیم، باید وجود آن را مانند این بررسی کنیم:

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

ما از یک دستور if ساده برای بررسی استفاده کردیم و سپس فقط آنچه را داریم به دست آوردیم روی ذخیره سازی محلی و آن را به عنوان HTML لیست نامرتب کارها قرار دهید.

اگر برنامه ساده ما را آزمایش کنید و ما آن را دوباره بارگذاری کنیم page ما می بینیم که در حال حاضر کار می کند و تنها چیزی که باقی مانده است ایجاد تابع برای زمانی است که کاربر تصمیم می گیرد تمام کارهای انجام شده را پاک کند. هنگامی که این اتفاق می افتد، ما تمام فضای ذخیره سازی محلی را پاک می کنیم، آن را دوباره بارگیری می کنیم page زیرا تغییرات ما اعمال می‌شوند، و سپس false را برمی‌گردانیم تا از هش جلوی url مانند این موارد جلوگیری شود:

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

با انجام این کار، برنامه ما به طور کامل کار می کند. کد کامل به صورت زیر است:

$('#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;
});

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

پشتیبانی از ذخیره سازی وب برای مشخصات HTML5 بسیار خوب است. این مرورگر توسط تمام مرورگرهای اصلی و حتی IE8 پشتیبانی می‌شود، بنابراین اگر هنوز از آن پشتیبانی می‌کنید، تنها چیزی که ممکن است لازم باشد مراقب آن باشید، IE7 است.

نتیجه

Local ذخیره سازی در برنامه های کوچک مانند این می تواند از جایگزین هایی برای پایگاه های داده استقبال کند. ذخیره مقادیر کم داده نیازی به پیچیده بودن ندارد.

چگونه داده ها را از جاوا اسکریپت ذخیره می کنید؟ آیا کوکی ها یا پایگاه های داده را به ذخیره سازی محلی ترجیح می دهید؟ در نظرات به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، تصویر ذخیره سازی از طریق Shutterstock.