کار با localStorage در جاوا اسکریپت

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با localStorage در جاوا اسکریپت با من همراه باشید.

کار با localStorage در جاوا اسکریپت

Free-Learn

localStorage در جاوا اسکریپت

اگه جلسات قبلی رو دنبال کرده باشید میدونید که ما در جلسات قبلی با کوکی ها و sessionStorage ها آشنا شدیم، و میدونیم که اینا کارشون یجور ذخیره سازی داده هاست ( البته داده های کوچک ) و در حافظه مرورگر خوده کاربر هم ذخیره سازی انجام میشه.

حال localStorage هم اساس کارش مثه هموناست و یجور ذخیره سازی رو در حافظه مرورگر خوده کاربر ایجاد میکنه، ولی تفاوتی بین localStorage و sessionStorage و کوکی ها می باشد که این تفاوت به شرح زیر می باشد :

  • در کوکی ها میشه عمر براشون تعریف کرد ( مثلا ۱سال ) ولی در sessionStorage نمیشه عمر تعریف کرد و به محض بسته شدن مرورگر سِشن هم از بین میره
  • حال localStorage ها عمرشون بصورت نامحدود می باشد ، یعنی الان ایجادش کنید و تا زمانی که حذفش نکردید میتونید بهش دسترسی پیدا کنید
  • localStorage ها به محض بسته شدن مرورگر از بین نخواهند رفت، یعنی شما مرورگر رو بکل ببند و دوباره برو چند روز ( هفته ، ماه ) دیگه بیا مرورگر رو بازش کن میبینی که هنوز داده ها سرجای خودشونن
  • معمولا و بروی اکثر مرورگرها، اگه در تنظیمات خوده مرورگر بریم و کوکی هارو پاک کنیم ، داده های localStorage و document.cookie هم پاک خواهد شد.

Free-Learn

نحوه تعریف داده ها در localStorage

شکل کلی برای تعریف localStorage دقیقا شبیه sessionStorage می باشد، یعنی باید برای localStorage مون یک شناسه یا کلمه کلیدی یا درکل نام مشخص کنیم و برای همین نام یه مقدار، تموم شد رفت.

  • Key : یه کلمه کلیدی یا یه اسم
  • Value : مقدار

مثال : در مثال زیر یک سشن با نام MyName و مقدار Sadegh Asadi ست کردیم

امتحان کنید

Free-Learn

نحوه فراخوانی داده ها از localStorage

برای فراخوانی localStorage ها هم مثه sessionStorage ها عمل میکنیم چون شکل نوشتاری شون یکی هستند، در ادامه میتونید شکل نوشتاری نحوه فراخوانی localStorage رو مشاهده نمایید :

  • Key : همون نام یا کلمه کلیدی که براش تعریف کردیم

مثال : فراخوانی همون سِشِنی که در مثال قبلی تعریف کردیم

امتحان کنید

Free-Learn

نحوه حذف کردن داده ها از localStorage

خیلی راحت کافیه نام یا همون کلمه کلیدی یا Key سشن رو وارد کنیم و دیگه اون سشن از حافظه حذف میشه، شکل کلی بصورت زیر می باشد :

  • Key : نام یا کلمه کلیدی سِشِن

مثال : حذف همون سِشِنی که در مثال شماره ۱ ست کردیم

امتحان کنید

Free-Learn

مثال های بیشتر

مثال شماره ۱ : انتخاب رنگ زمینه و رنگ متن صفحه توسط کاربر ( کاربر به سلیقه خودش رنگ زمینه و رنگ متن صفحه رو انتخاب میکنه و در دفعات بعدی دیگه وقتی وارد اون صفحه میشه همچنان همون رنگ هایی که خودش انتخاب کرده بود نمایش داده خواهد شد )

امتحان کنید

 

مثال شماره ۲ : طراحی سیستم ثبت نام و ورود با استفاده از localStorage

دوستان عزیزم لطفا توجه داشته باشید ، بنده این مثال و درکل این سیستم رو همینجوری بر اساس سلیقه خودم طراحی کردم و هدفم اینه که عملکرد localStorage رو ببینید، لذا هیچ سایتی و هیچ سیستمی از این روش برای ثبت نام و ورود کاربرانش استفاده نمیکنه، برای ایجاد یه سیستم ثبت نام و ورود باید از زبان های سمت سرور همچون PHP و پایگاه داده همچون Mysql استفاده نمایید.

مشاهده دمو » صفحه ثبت نام / صفحه ورود

Free-Learn

فروشگاه فری لرن
دریافت PDF یا پرینت این مطلب