این آموزش در تاریخ ۱۴۰۱/۰۴/۰۵ آپدیت شده است.
کار با localStorage در جاوا اسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با localStorage در جاوا اسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
localStorage در جاوا اسکریپت
اگه جلسات قبلی رو دنبال کرده باشید میدونید که ما در جلسات قبلی با کوکی ها و sessionStorage ها آشنا شدیم، و میدونیم که اینا کارشون یجور ذخیره سازی داده هاست ( البته داده های کوچک ) و این ذخیره سازی در حافظه مرورگر خوده کاربر انجام میشه.
حال localStorage هم اساس کارش مثه هموناست و یجور ذخیره سازی رو در حافظه مرورگر خوده کاربر ایجاد میکنه، ولی تفاوت هایی بین localStorage و sessionStorage و کوکی ها می باشد که این تفاوت به شرح زیر می باشد :
- در کوکی ها میشه عمر براشون تعریف کرد ( مثلا ۱سال ) ولی در sessionStorage نمیشه عمر تعریف کرد و به محض بسته شدن مرورگر سِشن هم از بین میره ( sessionStorage خودش گفت!؟ چی گفت!؟ دره گوشم گفت!؟ چی گفت!؟ گفت بهم دل نبندین که من رفتنیم خخخ )
- حال localStorage ها بقول خودش عمرش بصورت نامحدود می باشد ، یعنی الان ایجادش کنید و تا زمانی که حذفش نکردید میتونید بهش دسترسی پیدا کنید ( مثلا الان مرورگر رو ببندید و برید هفته یا ماه دیگه بیاید، میبینید که داده ها بازم سرجاشونن )
- معمولا و بروی اکثر مرورگرها، اگه در تنظیمات خوده مرورگر بریم و بخش کوکی هارو پاک کنیم ، داده های ذخیره شده در کوکی هم پاک میشن و در برخی موارد هم ممکنه پاک نشن.
- درسته که localStorage میگه ذخیره سازیش عمرش نامحدوده و داده ها با بستن مرورگر و حتی پاک کردن کَش مرورگر هم پاک نمیشن، ولی بازم نمیشه به این چیزا اعتماد کرد و حتما همیشه سعی کنید برای ذخیره سازی دائمی داده ها از پایگاه داده ها استفاده کنید.
- مثلا برای نگهداری داده های کاربران ( مثه نام کاربری و ایمیل و رمز و.. ) هم برای بحث امنیت و هم برای بحث دائمی بودن داده ها باید از پایگاه داده ( مثه MYSQL ) استفاده کرد.
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 6 7 8 9 10 11 |
<script> function Set(){ localStorage.setItem("MyName", "Sadegh Asadi"); } function Get(){ MySession = localStorage.getItem("MyName"); } </script> |
Free-Learn
نحوه حذف کردن داده ها از localStorage
خیلی راحت کافیه نام یا همون کلمه کلیدی یا Key سشن رو وارد کنیم و دیگه اون سشن از حافظه حذف میشه، شکل کلی بصورت زیر می باشد :
|
1 |
localStorage.removeItem( "Key" ); |
- Key : نام یا کلمه کلیدی سِشِن
مثال : حذف همون سِشِنی که در مثال بالا ست کردیم
|
1 2 3 4 5 6 7 |
<script> function Del(){ localStorage.removeItem("MyName"); } </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> |
مثال شماره ۲ : دریافت یک نام از کاربر با استفاده از جعبه پیغام 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 |
<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> |
