تبلیغات متنی و بنر

آموزش HTML 5 > ذخیره سازی اطلاعات کاربران در صفحات وب > شی localStorage

شی localStorage :

در بخش قبل ، به معرفی خاصیت web storage در HTML 5 پرداختیم . در آنجا گفتیم که این خاصیت جایگزین کوکی ها در صفحات وب شده و برای ذخیره اطلاعات کاربران استفاده می شود . این اطلاعات می تواند شامل نام کاربری ، تاریخ آخرین مراجعه به صفحه و یا اطلاعاتی از این دست باشد . خاصیت web storage از 2 شی برای ذخیره اطلاعات استفاده می کند . شی اول ، شی localStorage است ، که در ادامه به معرفی آن می پردازیم .
از شی localStorage برای نگهداری اطلاعات کاربران به مدت طولانی و بدون تاریخ انقضا استفاده می شود . این اطلاعات در مرورگر کاربر ذخیره شده و با بستن مرورگر و خاموش کردن کامپیوتر از بین نرفته و مجددا می توانند مورد بازیابی و استفاده قرار گیرند .
در نتیجه از این شی برای ذخیره اطلاعاتی استفاده می شود که در آینده به دفعات نیاز به آنها خواهد بود ( و نه اطلاعات مقطعی ) .

شکل کلی استفاده از شی localStorage بصورت زیر است :

syntax localStorage.name =" value " ;

syntax توضیح موارد
توضیح خاصبت
این پارامتر تعیین کتتده نام شی localStorage بوده و در سطح برنامه و برای دسترسی به آن از این نام استفاده می شود .
تعیین این پارامتر اجباری است . 		name
این پارامتر نیز تعیین کننده مقدار مورد نظر برای شی localStorage است .  این مقدار ،  در واقع مقدار کوکی مورد نظرمان است .
تعیین این پارامتر اجباری است . 		value

آموزش نحوه کار با شی localStorage در قالب مثال های عملی :

مثال 1 : در مثال زیر یک شی ساده  localStorage را به نام name ایجاد و مقدار دهی کرده ایم . سپس از آن در سطح صفحه استفاده نموده ایم . به کد مثال دقت نمایید . سپس به تشریح ، خط به خط آن پرداخته ایم :

Example
<div id="result">
</div>

<script>
       if  (typeof  ( Storage ) !== " undefined " ) {
                    localStorage.name = " Ali ";
                    document.getElementById("result").innerHTML = "Name: " + localStorage.name;
                }
        else {
                   document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
                }
</script>
 		کد
خروجی
  • در خط قرمز به بررسی این پرداخته ایم که آیا مرورگر از شی localStorage پشتیبانی می کند یا خیر و کدهای لازم برای هر حالت را تعیین نموده ایم .
  • در خط سبز یک شی localStorage به نام name را ایجاد و مقدار " Ali " را به آن نسبت داده ایم .
  • سپس در خط آبی مقدار شی  localStorage را خوانده و آن را در یک عنصر Html به نام result ریخته و نمایش داده ایم .
  • در نهایت در خط آخر ، که قهوه ای است ، در صورتی که مرورگر کاربر از شی localStorage پشتیبانی نکند ، یک پیام هشدار به وی نشان داده شده است .

 


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی

نظر خودتان درباره این صفحه را با ما در میان بگذارید  :

آیا مطالب این صفحه برای شما مناسب و مفید بود ه است :

نام :               
آدرس Email :  

نظر شما :  

سوال امنیتی : جمع سه + پنج چنده ؟