استفاده از LocalStorage با JavaScript
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 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'));
}
حالا اگر صفحه رو رفرش کنید میبینید تمام مواردی که قبلا وارد کردید وجود داره و نمایش داده میشه مگر اینکه کاربر تصمیم بگیره با کلیک روی دکمه Clear همه ی اونها رو پاک کنه. وقتی کاربر این کار رو انجام بده، ما تمام Local Storage رو پاک میکنیم و صفحه رو رفرش میکنیم و در نهایت return 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;
});
نظرات و سوالات کاربران