کار با localStorage در جاوا اسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با localStorage در جاوا اسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
localStorage در جاوا اسکریپت
اگه جلسات قبلی رو دنبال کرده باشید میدونید که ما در جلسات قبلی با کوکی ها و sessionStorage ها آشنا شدیم، و میدونیم که اینا کارشون یجور ذخیره سازی داده هاست ( البته داده های کوچک ) و در حافظه مرورگر خوده کاربر هم ذخیره سازی انجام میشه.
حال localStorage هم اساس کارش مثه هموناست و یجور ذخیره سازی رو در حافظه مرورگر خوده کاربر ایجاد میکنه، ولی تفاوتی بین localStorage و sessionStorage و کوکی ها می باشد که این تفاوت به شرح زیر می باشد :
- در کوکی ها میشه عمر براشون تعریف کرد ( مثلا ۱سال ) ولی در sessionStorage نمیشه عمر تعریف کرد و به محض بسته شدن مرورگر سِشن هم از بین میره
- حال localStorage ها عمرشون بصورت نامحدود می باشد ، یعنی الان ایجادش کنید و تا زمانی که حذفش نکردید میتونید بهش دسترسی پیدا کنید
- localStorage ها به محض بسته شدن مرورگر از بین نخواهند رفت، یعنی شما مرورگر رو بکل ببند و دوباره برو چند روز ( هفته ، ماه ) دیگه بیا مرورگر رو بازش کن میبینی که هنوز داده ها سرجای خودشونن
- معمولا و بروی اکثر مرورگرها، اگه در تنظیمات خوده مرورگر بریم و کوکی هارو پاک کنیم ، داده های localStorage و document.cookie هم پاک خواهد شد.
Free-Learn
نحوه تعریف داده ها در localStorage
شکل کلی برای تعریف localStorage دقیقا شبیه sessionStorage می باشد، یعنی باید برای localStorage مون یک شناسه یا کلمه کلیدی یا درکل نام مشخص کنیم و برای همین نام یه مقدار، تموم شد رفت.
|
1 |
localStorage.setItem( " Key " , " Value " ); |
- Key : یه کلمه کلیدی یا یه اسم
- Value : مقدار
مثال : در مثال زیر یک سشن با نام MyName و مقدار Sadegh Asadi ست کردیم
|
1 2 3 4 5 |
<script> localStorage.setItem("MyName", "Sadegh Asadi"); </script> |
Free-Learn
نحوه فراخوانی داده ها از localStorage
برای فراخوانی localStorage ها هم مثه sessionStorage ها عمل میکنیم چون شکل نوشتاری شون یکی هستند، در ادامه میتونید شکل نوشتاری نحوه فراخوانی localStorage رو مشاهده نمایید :
|
1 |
localStorage.getItem( "Key" ); |
- Key : همون نام یا کلمه کلیدی که براش تعریف کردیم
مثال : فراخوانی همون سِشِنی که در مثال قبلی تعریف کردیم
|
1 2 3 4 5 |
<script> var GetData = localStorage.getItem("MyName"); </script> |
Free-Learn
نحوه حذف کردن داده ها از localStorage
خیلی راحت کافیه نام یا همون کلمه کلیدی یا Key سشن رو وارد کنیم و دیگه اون سشن از حافظه حذف میشه، شکل کلی بصورت زیر می باشد :
|
1 |
localStorage.removeItem( "Key" ); |
- Key : نام یا کلمه کلیدی سِشِن
مثال : حذف همون سِشِنی که در مثال شماره ۱ ست کردیم
|
1 2 3 4 5 6 7 8 |
<script> function DelData(){ localStorage.removeItem("MyName"); alert("سشن حذف شد، حالا اگه میتونی داده هارو فراخوانی کن"); } </script> |
Free-Learn
مثال های بیشتر
مثال شماره ۱ : انتخاب رنگ زمینه و رنگ متن صفحه توسط کاربر ( کاربر به سلیقه خودش رنگ زمینه و رنگ متن صفحه رو انتخاب میکنه و در دفعات بعدی دیگه وقتی وارد اون صفحه میشه همچنان همون رنگ هایی که خودش انتخاب کرده بود نمایش داده خواهد شد )
|
1 2 3 4 5 6 |
<div class="mybox"> <h2>رنگ زمینه و رنگ متن را انتخاب نمایید</h2> <p>رنگ زمینه : <input type="color" id="bg_color"></p> <p>رنگ متن :<input type="color" id="text_color"></p> <button onclick="set_color();">رنگ را اعمال کن</button> </div> |
مثال شماره ۲ : طراحی سیستم ثبت نام و ورود با استفاده از localStorage
دوستان عزیزم لطفا توجه داشته باشید ، بنده این مثال و درکل این سیستم رو همینجوری بر اساس سلیقه خودم طراحی کردم و هدفم اینه که عملکرد localStorage رو ببینید، لذا هیچ سایتی و هیچ سیستمی از این روش برای ثبت نام و ورود کاربرانش استفاده نمیکنه، برای ایجاد یه سیستم ثبت نام و ورود باید از زبان های سمت سرور همچون PHP و پایگاه داده همچون Mysql استفاده نمایید.
مشاهده دمو » صفحه ثبت نام / صفحه ورود
برای دانلود کلیک نمایید.
