LocalStorage و SessionStorage چیست

Web storage object   هایی که تو این مقاله میخوام در موردش صحبت کنم localStorage  و sessionStorage هستن که به ما امکان ذخیره به شکل جفت های key,value درون Browser  رو میدن . 
اونچه که اون هارو جذاب می کنه اینه که داده ها بعد از بروزرسانی یا refresh  زنده می مونن یا به اصطلاح از بین نمیرن (البته فقط برای حالت  استفاده از sessionStorag )  و حتی بعد از اینکه borwser کاملا بسته و مجدد باز شد ، داده ها حفظ میشن (فقط برای  برای حالت استفاده از localStorage)  

خب اینجا یه سوالی پیش میاد . ما که قبلا از Cookie  ها استفاده میکردیم چرا دوباره Objcect  های اضافی ؟
اینجا سه تا از وجه تمایز هاش برات میگم : 
•    برخلاف کوکی ها ، WSO  ها (منظور همون Web storage object  ها هستن که مختصر مینویسم ) تو هر بار درخواست به سمت سرور ارسال نمیشن و به همین دلیل ما میتونیم حجم داده ی بیشتری رو ذخیره کنیم . اکثر مرورگر ها حداکثر 2 مگابایت اجازه ذخیره سازی رو میدن (یا بیشتر ) که البته تنظیماتشون قابل پیکربندی هم هست .
•    علاوه بر این سرور نمیتونه wso  هارو در header  های http  دستکاری کنه . همه چیز تو جاوااسکریپت اتفاق میفته . 
•    فضای ذخیره سازی محدود به مبدا هستش ینی همون سه گانه ی پروتکل / دامنه و پورت . ینی به عبارتی زیر دامنه ها امکان استفاده اشتراکی از wso  ها رو ندارن .
هر دوی این wso  ها متد ها و پراپرتی های یکسانی دارن .
1.    setItem(key, value) 
2.    getItem(key) 
3.    removeItem(key) 
4.    clear() 
5.    key(index) 
6.    length 

متد setItem  یک جفت key,value  رو برای ما ذخیره میکنه .
متد getItem یک مقدار رو با گرفتن key  برمیگردونه .
متد removeItem یک مقدار رو با گرفتن key  حذف میکنه .
متد clear  هر چی دیتا ذخیره کردیمو پاک می کنه . 
متد key  یه key رو با گرفتن موقعیت یا position  اون برمیگردونه .
و متد length هم تعداد موارد ذخیره شده رو برمیگردونه .
همونطور که مشاهده میکنین ، (setItem , getItem,removeItem )  شبیه یه map  کالکشنه اما همچنان اجازه دسترسی با استفاده از index  رو هم بهمون میده (key(postion)) .  خب اجازه بدین ببینیم چطوری کار میکنه .

localStorage  ها : 

از مهمترین خصوصیات بارز localStorage  ها میشه به دو مورد زیر اشاره کرد : 
•    به اشتراک گذاشتن دیتا بین تمام تب ها و صفحات تحت یک دامنه .
•    دیتا ها تاریخ انقضا ندارن . حتی بعد از باز و بسته کردن مرورگر و یا حتی ریبوت کردن سیستم عامل قابل دسترسی ان .
برای مثال اگه از قطعه کد زیر استفاده کنیم :
localStorage.setItem('ostadbash', 1);
و مرورگر رو ببندین و باز کنین یا فقط همون صفحه رو در یک پنجره دیگه باز کنین ، میتونین اون رو با قطعه کد زیر دوباره get  کنین :
alert( localStorage.getItem('ostadbash') ); // 1

این نکته رو در نظر داشته باشین که فقط باید تحت یک دامنه باشیم . (domain/port/protocol)  ولی url path  میتونه متفاوت باشه ، پس با این تفاسیر چون localStorage  بین تمام صفحات از یک منبع به اشتراک گذاشته میشود بنابراین اگر دیتا ها رو تو یه پنجره تنظیم کنیم ، تغییرات تو یه پنجره دیگه هم قابل مشاده خواهد بود .

نمونه ای دیگه از نحوه دسترسی به عناصر wso  ها 
یه روش ساده تر دیگه هم برای  getting  و setting در wso  هست که براتون مثال میزنم :

// set key
localStorage.ostadbash = 2;

// get key
alert( localStorage.ostadbash); // 2

// remove key
delete localStorage.ostadbash;

Looping over keys  : 

همونطور که دیدیم ، این متد ها قابلیت حذف ، ایجاد و دریافتی رو بر اساس یک کلید فراهم میکنه اما چطور میشه تمام مقادیر ذخیره شده رو بازیابی کنیم ؟ متاسفانه WSO  ها قابلیت تکرار رو ندارند ینی iterable  نیستن . 
یکی از راه های پیش رو اینه که مثل یه آرایه روشون حلقه بزنیم : 

for(let i=0; i<localStorage.length; i++) {
  let key = localStorage.key(i);
  alert(`${key}: ${localStorage.getItem(key)}`);
}

روش دیگه مثل استفاده از foreach  های درون c# هست که در واقعbest practice  نیست .

// bad try
for(let key in localStorage) {
  alert(key); // shows getItem, setItem and other built-in stuff
}

عیب این روش اینه که متد های built-in برای WSO  ها هم نمایش داده میشه مثل setItem , getItem  و ... . بنابراین باید به روش زیر اونارو فیلتر کنیم : 

for(let key in localStorage) {
  if (!localStorage.hasOwnProperty(key)) {
    continue; // skip keys like "setItem", "getItem" etc
  }
  alert(`${key}: ${localStorage.getItem(key)}`);
}

یا کلا به جای استفاده از حالت بالا از حالت زیر استفاده کنیم : 

let keys = Object.keys(localStorage);
for(let key of keys) {
  alert(`${key}: ${localStorage.getItem(key)}`);
}

String only   : 

این نکته رو مد نظر داشته باشین که هر دو key   و value باید از نوع رشته ای باشن و اگه از نوع دیگه ای مثل عددی یا آبجکت یا هر چیز دیگه استفاده کنیم به صورت اتوماتیک به رشته تبدیل میشن .
همچنین از JSON  هم میتونیم برای ذخیره سازی آبجکت ها استفاده کنیم مثل زیر : 

sessionStorage.website = JSON.stringify({name: "ostadbash"});

// sometime later
let website = JSON.parse( sessionStorage.website );
alert( website.name ); // ostadbash

sessionStorage  ها : 

sessionStorage ها معمولا نسبت به localStorage ها کمتر استفاده میشن . پراپرتی ها و متد ها شون یکی هستن ولی خب محدودیت این نوع یک کم بیشتره که در زیر به دو مورد اشاره می کنم :
1.    sessionStorage ها فقط در داخل همون تبی که استفاده شدن قابل دسترسی ان .
    یه تب دیگه با محتویات همون صفحه یه فضای ذخیره سازی دیگه داره .
    اما قابل به اشتراک گذاری درون iframe های یک تب هستن که از یه منبع استفاده شده باشه.
2.    دیتا تا زمانی قابل استفاده هست که ما اون تب رو باز و بسته نکنیم .
به طور مثال قطعه کد زیر رو اجرا کنین : 

sessionStorage.setItem('ostadbash', 1);

حالا صفحه رو refresh  کنین و هنوز میتونین با کد زیر به مقدار ذخیره شده دسترسی داشته باشین :

alert( sessionStorage.getItem('ostadbash') ); // after refresh: 1

اما اگه همین صفحه رو تو یه تب دیگه باز کنین و کد بالا رو اجرا کنین می بینین که مقدار null  رو بر میگردونه که ینی nothing found  و به همین دلیله که کمتر از sessionStorage استفاده میشه .

خلاصه داستان ما : 

پس خلاصه این مقاله میخواد بگه که WSO ها به ما امکان ذخیره جفت key,value   هارو درون مرورگر ها میدن .
•    هر دوی key,value  ها باید از نوع رشته ای باشن 
•    محدودیت بالای 5 مگابایت وابسته به نوع مرورگر 
•    تاریخ انقضا ندارن 
•    دیتا مقید به منبه (domain/port/protocol)