این آموزش در تاریخ ۱۴۰۰/۰۸/۱۰ آپدیت شده است.
آموزش ویژگی localStorage در BOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی localStorage در BOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی localStorage در BOM جاوااسکریپت
با استفاده از ویژگی localStorage میتونیم داده ها ( داده های کوچک ) رو درون مرورگر ذخیره کنیم و همچنین میتونیم به داده های ذخیره شده در مرورگر دسترسی پیدا نماییم.
یه ویژگی دیگه بنام sessionStorage داریم که اونم کارش ذخیره سازی داده ها در مرورگر می باشد.
وقتی داده ها در حافظه مرورگر ذخیره بشن دیگه در دفعات بعدی بازم در دسترس هستند، یعنی اگه صفحه رو رفرش ( دوباره بارگذاری ) کنید یا اگه کلا صفحه رو ببندید و دوباره باز کنید بازم داده ها در دسترس هستند.
تفاوت localStorage با sessionStorage : ویژگی localStorage داده هارو در مرورگر بصورت دائمی ذخیره میکنه، یعنی اگه مرورگر رو ببندید و دوباره باز کنید بازم داده ها سرجاشونن ولی sessionStorage با بسته شدن مرورگر تمامی داده ها حذف خواهد شد.
ما ۲ نوع ذخیره سازی داریم، یکی ذخیره سازی سمت کاربر و دیگری ذخیره سازی سمت سرور، سمت کاربر یعنی داده ها در مرورگر یا سیستم خوده کاربر ذخیره میشن ولی سمت سرور یعنی داده ها روی پایگاه داده ذخیره میشن، پس localStorage و sessionStorage ذخیره سازی شون سمت کاربر هست، در نتیجه برای نگهداری داده های بزرگ و حساس ( و بصورت دائمی ) اصلا نباید از این روش استفاده نمایید، و باید از پایگاه داده ها استفاده نمایید.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : ست کردن داده ( مثلا یک نام ) درون حافظه مرورگر
|
1 2 3 4 5 |
<script> localStorage.setItem("MyName", "فری لرن"); </script> |
مثال شماره ۲ : گرفتن داده ( همون نام ) از حافظه مرورگر
|
1 2 3 4 5 |
<script> localStorage.getItem("MyName"); </script> |
مثال شماره ۳ : حذف داده ( همون نام ) از حافظه مرورگر
|
1 2 3 4 5 |
<script> localStorage.removeItem("MyName"); </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| localStorage | ۴ | ۳٫۵ | ۱۱٫۵ | ۴ | ۸ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
- ست کردن کلید جدید : ( روش اول )
|
1 |
localStorage.setItem(" Key_Name ", " Key_Value "); |
- ست کردن کلید جدید : ( روش دوم ) ( مثال )
|
1 |
localStorage.Key_Name = " Key_Value "; |
- ست کردن کلید جدید : ( روش سوم ) ( مثال )
|
1 |
localStorage[" Key_Name "] = " Key_Value "; |
- گرفتن / دریافت کلید :
|
1 |
localStorage.getItem(" Key_Name "); |
- حذف کردن کلید :
|
1 |
localStorage.removeItem(" Key_Name "); |
- حذف تمامی کلیدهای موجود در حافظه :
|
1 |
localStorage.clear(); |
Free-Learn
نکات و توضیحات
- ویژگی localStorage داده هارو بصورت دائمی و تازمانی که توسط خودمون حذف نشده اند نگهداری میکنه ولی sessionStorage به محض بسته شدن مرورگر تمامی داده هاش حذف میشن.
- درسته حالا بقول خودش داده هارو بصورت دائمی ذخیره میکنه ولی بازم بهش اعتماد نکنید و همیشه از پایگاه داده ها برای ذخیره سازی و نگهداری داده ها بصورت دائمی استفاده کنید.
Free-Learn
مثال های بیشتر
مثال شماره ۱ : دریافت یک نام از کاربر با استفاده از جعبه پیغام Prompt و ذخیره در حافظه مرورگر و نمایش در دفعات بعدی
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script> function set(){ var user_name,result; result = document.getElementById("Result"); user_name = prompt("اسم شما چیه؟"); if( user_name == null || user_name == "" ){ result.innerHTML ="دیگه اذیت نکن، یه نامی چیزی وارد کن"; } else{ localStorage.setItem("UserName", user_name); get(); } } function get(){ var result = document.getElementById("Result"); var Uname = localStorage.getItem("UserName"); result.innerHTML = " سلام " + Uname + " خوبی؟ "; } </script> |
مثال شماره ۲ : تنظیم رنگ زمینه و رنگ متن و ذخیره در حافظه مرورگر
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> function set_color(){ var user_bg_color , user_text_color ; user_bg_color = document.getElementById("bg_color").value; user_text_color = document.getElementById("text_color").value; localStorage.setItem("BG_COLOR", user_bg_color); localStorage.setItem("TEXT_COLOR", user_text_color); alert("رنگ با موفقیت اعمال شد، حالا صفحه رو رفرش کن"); } function get_color(){ var Get_BG_COLOR = localStorage.getItem("BG_COLOR"); var Get_TEXT_COLOR = localStorage.getItem("TEXT_COLOR"); document.body.style.backgroundColor = Get_BG_COLOR; document.body.style.color = Get_TEXT_COLOR; } </script> |
مثال شماره ۳ : برنامه ای که هربار به یک متغیر مقدار اضافه میکنه ( شمارش بازدید از صفحه )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> function Bazdid(){ if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount)+1; }else{ localStorage.clickcount = 1; } var Result = document.getElementById("result"); Result.innerHTML = localStorage.clickcount; } </script> |
