ذخیره کردن داده‌ها تو 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

.

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

قربان شما،

آمیرزا