تهران، سعادت آباد، خیابان کوهستان،
مجتمع کوهستان، سرو ۴، طبقه ۳ واحد ۲
۲۲۱۳۴۴۹۶ ۰۲۱
۳۶۶۶۸۳۲۸ ۰۲۶
info[at]web-city.ir
support[at]web-city.ir

استفاده از Local Storage در جاوااسکریپت

استفاده از Local Storage در جاوااسکریپت

ساختن یک نرم افزار توسط زبان جاوااسکریپت باید اولین مطلبی باشد که یک برنامه نویس و طراح وب سایت به آن توجه نماید, اما یکی از مشکلات این نرم افزارها که با زبان جاوااسکریپت نوشته شده باشد این است که زمانی که صفحه ریفرش میشود تمامی اطلاعات از بین خواهند رفت.
یکی از این راه حل ها میتواند این مشکل را برطرف نماید که استفاده از Local Storage میباشد. یکی از خبرهای خوبی که از استفاده نمودن از local storage به گوش میرسد این است که حتی اطلاعات بسیار کوچک را میتوانیم در کامپیوتر همان کاربر ذخیره نماییم تا زمانی که صفحه وب سایت ریفرش میشود تمامی اطلاعات سر جای خودشان باقی بماند. Local storage بسیار بی سر و صدا کار میکند و کاربر بی هیچ وجه متوجه نخواهد شد که این اطلاعات بر روی کامپیوترش ذخیره شده و دوباره مورد استفاده قرار میگیرد.
در این مقاله از سری مقاله های طراحی وب سایت و برنامه نویسی و سئو وب سایت که در شرکت طراحی وب سایت وب شهر برای شما تهیه و تدوین شده است, قصد داریم تا شما را به صورت کامل با این تکنولوژی جدید آشنا نماییم.

Local Storage چه میباشد؟
Local storage بخشی از web storage میباشد, که تمامی اینها بخشی از قابلیت های زبان HTML5 هستند. دو راه حل وجود دارد که شما بتوانید اطلاعات را بر روی کامپیوتر کاربر ذخیره نمایید.
Local storage: ذخیره سازی اطلاعات بدون در نظر گرفتن تاریخ انقضاء و هر زمانی که بخواهید میتوانید از آن استفاده نمایید, چرا که با لود شدن صفحه وب سایت در مرورگر کاربر میتوانید در همان زمان به اطلاعات ذخیره شده دسترسی پیدا نمایید.
Session Storage: تنها میتواند اطلاعات را در همان موقع و یا اصطلاحا session ذخیره نمایند. بنابراین زمانی که کاربر مرورگر خود را ببندد تمامی اطلاعات از دست خواهند رفت.

از نگاه ساده و کاملا مشخص باید بگوییم که تمامی اطلاعاتی که در وب ذخیره میشوند و تحت نام web storage شناخته میشوند از جفت های key/value تشکیل شده اند و بر خلاف فایل های کوکی, این اطلاعات میتوانند در کامپیوتر کاربر همواره دائما وجود داشته باشند, حتی اگر کاربر مرورگر خود را ببندد و یا کامپیوتر خود را خاموش نماید.

THE HTML
در لیست زیر قصد داریم تا مواردی که لازم داریم را فهرست وار به شما بگوییم که عبارتند از:
** یک فرم برای قرار دادن آبجکت مورد نظر در داخل آن
** یک دکمه
** یک دکمه برای از بین بردن اطلاعات
** یک unordered list
** در نهایت یک تگ div برای قرار دادن آبجت ها در داخل آن

در زیر میتواند کد مواردی که در بالا به آن اشاره شد را ملاحظه نمایید:

 

<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>

 

THE JAVASCRIPT
در ابتدا کاربر با کلیک نمودن بر روی دکمه مورد نظر, بررسی مینماییم که آیا تگ input خالی میباشد یا خیر. به کد زیر نگاه کنید

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

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

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

پشتیبانی مرورگرها
پشتیبانی از web storage امروزه در مرورگرها بسیار خوب میباشد; توسط بسیاری از مرورگرها پشتیبانی میشود و این پشتیبانی حتی در IE8 هم بسیار خوب میباشد, اما این را هم باید بدانید که IE7 اصلا آن را پشتیبانی نمیکند.

نتیجه گیری
Local Storage از نگاه دیگری میتواند یک دیتابیس کوچکی باشد که میتوانید اطلاعاتی که اصلا پیچیده نیستند را در کامپیوتر کاربر ذخیره نماییم.

اشتراک

حمیدرضا عباسی

حمیدرضا عباسی هستم، کارشناس نرم افزار و دانشجوی کارشناسی ارشد تجارت الکترونیک، طراح و توسعه دهنده وب سایت و متخخص سئو، از سال ۹۰ به صورت حرفه ای شروع به فعالیت در زمینه طراحی وب سایت کردم و بسیار علاقه مند و مشتاق به استفاده از تکنولوژی های جدید و بروز در زمینه طراحی وب سایت و تجارت الکترونیک هستم.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هشت − 1 =