html5 localStorage

ذخیره کردن داده‌ها تو localStorage با store.js ساده و دوست‌داشتنی!

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

الغرض، یکی از راهکاری ذخیره‌سازی داده سمتِ کاربر تحتِ مرورگر، localStorage هست (عجب کلمه‌ای شد! سمتِ کاربر تحتِ مرورگر). تو این نوشته میخواهیم به localStorage بپردازیم و از قدرت Store.js برای بهتر کردن کارمون استفاده کنیم.

پیش از هر چیزی ممکنه این سوال پیش بیاد: اصلا localStorage چی هست؟

localStorage یه راهکار ساده برای ذخیره کردن داده‌ها تحت مرورگره که اولین بار تو Firefox 3.5 ارائه شد و این روزا تقریبا توسط اکثر مرورگرهای مطرح حمایت میشه.

سوال بعدی، مزیت localStorage نسبت به کوکی‌ها چیه؟

اول این‌که کوکی‌ها همراه هر request به سرور ارسال میشن و همراه هر response هم برمی‌گردن! پس بار ترافیک ارسالی و دریافتی رو افزایش میدن، گرچه خیلی کم!

دوم این‌که حجم داده‌ای که کوکی‌ها می‌تونن ذخیره کنن، محدوده! فقط ۴ کیلوبایت ناقابل!

سوم این‌که این روزا بعضی‌ها به خاطر مسائل امنیتی ذخیره شدن کوکی رو تو مرورگرشون غیرفعال کردن!

localStorage هیچ‌کدوم از مسائل بالا رو نداره! همین خودش میشه مزیتش، مگه نه؟

چطوری با localStorage کار کنم؟

خیلی ساده! برای ذخیره کرده یه داده توی localStorate می‌تونیم از متد ()setItem استفاده کنیم، برای خوندنش هم از ()getItem. بالطبع برای حذف اون داده هم می‌تونیم از ()removeItem استفاده کنیم. به همین سادگی، به همین خوشمزگی!

localStorage.setItem('name','Mirza');
var taste = localStorage.getItem('name');
// -> "Mirza"

در هر صورت کار رو می‌تونیم حتی ساده‌تر هم انجام بدیم، به صورت زیر:

localStorage.name = 'Mirza';

همه‌چی خیلی خوب و ساده‌ست، فقط یک نکته هست که باید مدنظر قرار بدیم، و اون هم این‌که localStorage همه‌چی رو به صورت رشته (یا به قول فرنگی‌ها string) ذخیره می‌کنه! به‌عبارت دیگه، هرچیزی رو که بخواهیم توی localStorage ذخیره کنیم، قبل از ذخیره شدن تبدیل به string میشه! به مثال زیر توجه کنید:

localStorage.setItem('user', {name: 'Mirza', age: 28});
var taste = localStorage.getItem('user');
// -> [Object Object]

اوپس! پس اگه یه object رو همین‌طور خشک و خالی و بدون هیچ‌گونه تشریفاتی توی localStorage ذخیره کنیم چیزی جز [Object Object] نمی‌تونیم تحویل بگیریم!!! و این یعنی داده‌هامون پریده و رفته! چرا؟ چون localStorage همه‌چی رو به صورت string ذخیره میکنه، خواه ورودی ما Boolean باشه، خواه عدد، خواه object

خوب پس چاره چیه؟ راه حل ساده است، کافیه اشیا رو قبل از ذخیره کردن با ()JSON.stringify به یه رشته‌ی درست و درمون تبدیل کنیم (یا به قولی اون رو serialize کنیم)، حالا می‌تونیم اون رو توی localStorage ذخیره کنیم. موقع خوندن اون هم کافیه تا از ()JSON.parse استفاده کنیم تا دوباره تبدیل به یه شی بشه. به مثال زیر توجه کنید:

var user = {};
user.name = 'Mirza';
user.age = 28;
localStorage.setItem( 'user', JSON.stringify(user) );
var newUser = JSON.parse( localStorage.getItem( 'user' ) ) );

گرچه این روش ساده‌ست و پیچیدگی خاصی نداره، ولی همیشه برای تنبل‌هایی مثل من یه راه ساده‌تر وجود داره، و اون راه چیزی نیست جز store.js

حالا store.js چیه؟

store.js یه کتابخونه‌ی کوچیک برای جاوااسکریپته که کار ذخیره کردن و خوندن داده‌ها توی localStorage رو برای ما ساده‌تر از ساده می‌کنه!

تو store.js برای ذخیره کردن داده، خوندنش و پاک کردن اون به ترتیب از متدهای ()set()، get و ()remove استفاده میشه. نکته‌ای که وجود داره، وقتی یه داده رو با store.js توی localStorage ذخیره می‌کنیم، وقتی بخونیمش از همون نوعی به ما برمی‌گرده که موقع ذخیره کردن بوده. مثلا اگه عدد بوده، عدد برمی‌گرده، اگه شی بوده شی برمی‌گرده و قس علی هذا! یعنی دیگه نیازی نیست از چیزایی مثل ()JSON.stringify و ()JSON.parse استفاده کنیم. پس کارمون ساده‌تر میشه.

مثال‌های زیر که توی مستندات store.js اومدن، مختصر و مفید نحوه‌ی کار store.js رو نمایش میدن:

// Store 'marcus' at 'username'
store.set('username', 'marcus')

// Get 'username'
store.get('username')

// Remove 'username'
store.remove('username')

// Clear all keys
store.clear()

// Store an object literal - store.js uses JSON.stringify under the hood
store.set('user', { name: 'marcus', likes: 'javascript' })

// Get the stored object - store.js uses JSON.parse under the hood
var user = store.get('user')
alert(user.name + ' likes ' + user.likes)

// Get all stored values
store.getAll().user.name == 'marcus'

راستی localStorage از expiration برای داده‌ها حمایت نمی‌کنه. یعنی نمی‌تونیم بهش بگیم اطلاعات کاربر رو فقط برای مثلا یک روز نگه دار و بعد از اون پاکش کن! این امکان تو کوکی‌ها وجود داره، اما تو localStorage خبری ازش نیست. در هر صورت، store.js تو مستنداتش یه هک کد کوچیک بهمون پیشنهاد داده که با کمک اون می‌تونیم امکان expiration رو تاحدودی به localStorage اضافه کنیم:

var storeWithExpiration = {
    set: function(key, val, exp) {
        store.set(key, { val:val, exp:exp, time:new Date().getTime() })
    },
    get: function(key) {
        var info = store.get(key)
        if (!info) { return null }
        if (new Date().getTime() - info.time > info.exp) { return null }
        return info.val
    }
}
storeWithExpiration.set('foo', 'bar', 1000)
setTimeout(function() { console.log(storeWithExpiration.get('foo')) }, 500) // ->; "bar"
setTimeout(function() { console.log(storeWithExpiration.get('foo')) }, 1500) // -> null

در آخر، برای آشنایی بیشتر با localStorage مقاله‌ی کریستین هِیلمن رو بهتون توصیه می‌کنم:

Local Storage And How To Use It On Websites

همین‌طور می‌تونید به صفحه Local Storage تو W3Schools مراجعه کنید:

HTML5 Local Storage

.

شاد باشید و موفق،

قربان شما،

آمیرزا

آمیرزا

یه برق‌خونده‌ی علاقه‌مند به برنامه‌نویسی

6 دیدگاه برای “ذخیره کردن داده‌ها تو localStorage با store.js ساده و دوست‌داشتنی!

  1. ممنون از مقاله . مطلب کاملا مفیدی بود
    من تازگی ها با Local Storage آشنا شدم و دارم ازش استفاده میکنم
    یه چیزی در مورد Local Storage تو ذهنم هست میخواستم ببینم شما میتونی راهنمایی کنید
    من یه api با nodejs ساختم و یه قسمتیش فقط اطلاعات ایمیل و اسم کاربرها را خروجی json میده که میخوام ازش توی جاهای عمومی سایتم استفاده کنم
    حالا میخوام فرانت اند را با انگولار کار کنم . توی آنگولار توی سرویس ها مجبورم url اون api که ساختم را وارد کنم / به عنوان مثال web.com/api/users …. مشکلم اینه اگر کسی این url را ببینه میتونه به کل اطلاعات ایمیل کاربرهام دسترسی داشته باشه حالا اگر من بیام از Local Storage استفاده کنم و بگم هر وقت اون سرویس تو آنگولار فعال شد یه توکن که قبلا توی بک اند ساخته شده با یه key توی لوکال استورج دخیره بشه و اجازه دسترسی اون لینک را در بک اند [nodejs] بزارم روی اینکه این توکن توی لوکال استورج ایجاد شده باشه !
    به نظرتون این کار جواب میده ! نمیدونم والا چیزیه که به ذهنم رسیده !

    1. اگه سوالت رو درست متوجه شده باشم، قصد داری یه سیستم احراز هویت مبتنی بر token راه بندازی. که کار درستیه. در اینصورت اگه فردی دسترسی لازم رو نداشته باشه نمی‌تونه از اون لینک استفاده کنه.
      در هر صورت، من خودم هنوز با سیستم احراز هویت مبتنی بر token کار نکردم و تازه دارم یاد میگیرمش. اصلا تو همین مراحل یادگیری احراز هویت با token بود که با localStorage آشنا شدم. البته من دارم api خودم رو با lumen طراحی میکنم که یه micro-framework مبتنی بر زبون برنامه‌نویسی php هست. گرچه رابط کاربری اپلیکیشنم رو دارم با React.js کار می‌کنم.
      الغرض، پیشنهادم به شما اینه که تو این مسیر حتما از راهکارهای استاندارد استفاده کنی. مثلا OAuth 2. تو مسائل امنیتی همیشه سعی کنیم تا از راهکارهای استاندارد استفاده کنیم تا با ریسک کمتری مواجه بشیم. تو لینکهای زیر میتونی اطلاعاتی راجع به OAuth 2 کسب کنی:
      OAuth 2.0
      Simple OAuth 2 for Node.js

      1. ممنون از پاسختون
        بزارید یکم کاملترش کنم . من بخش ورود و خروج منظورم نبود . بحث خروج و ورد را من با jwt دارم کار میکنم البته منم اول راهم اما اینجا بیشتر نظرم اینه که اگر apiurl را همه کس توی کدهای js من دیدن اگر خواستند کپیش کنند ببرند توی Url مرورگزشون بزنند نتوننت اطلاعات رو ببینند . یه جورای شاید عجیب باشه اما میخوام اون apiurl فقط توی اون صفحه سایت من لود بشه .
        به هر حال حالا که شما دارید با React.js کار میکنید میخواستم بدونم منبع آموزشی خاصی سراغ دارید برای استفاده api برای ساخت فرانت اند در react . چون خودمم دوست دارم react کار کنم . بازم ممنون

        1. در این صورت الان شما خیلی جلوتر از من وایسادین. برا همین فعلا نمیتونم بهتون کمکی بکنم، چون هنوز تو مقدمات طراحی api خودم هستم و اطلاعات زیادی راجع به حل مشکلاتش ندارم.
          در هر صورت، برای React.js یکی از جاهایی که میتونه راهنمای خوبی باشه، TutorialsPoint هست. گرچه آموزشهاش خیلی ابتدائیه، ولی بدک نیست:
          ReactJS Tutorial PDF Version
          این مقاله هم کلا درمورد طراحی api به نظر چیز خوبی میاد:
          Best Practices for Designing a Pragmatic RESTful API

پاسخ دهید

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