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

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

شی sessionStorage :

این شی هماند شی localStorage می تواند اطلاعات کاربر را روی کامپیوتر و مرورگر وی ذخیره نماید ، با این تفاوت که شی sessionStorage اطلاعات را بصورت موقتی ذخیره کرده و با بسته شدن مرورگر تمام این اطلاعات از بین خواهد رفت .
 بنابراین از این شی بایستی برای ذخیره سازی اطلاعات مقطعی و اطلاعاتی که در آینده نیاز به آن نداریم استفاده کرد .

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

syntax sessionStorage.name =" value " ;

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

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

مثال 1 : در مثال زیر یک شی   sessionStorage را به نام clickcount ایجاد  کرده ایم .این شی تعداد  دفعات کلیک کاربر بر روب دکمه فرمان مثال را شمرده و آن را در کوکی  clickcount  ذخیره کرده و در خروجی نمایش می دهد . با بسته شدن مرورگر ، اطلاعات این شی از بین می رود و ریست می شود :

Example
<script type="text/javascript">
      function clickCounter() {
             if (typeof (Storage) !== "undefined") {
                       if (sessionStorage.clickcount) {
                                   sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
                                   }
                       else {
                                  sessionStorage.clickcount = 1;
                               }
                      document.getElementById("result").innerHTML = "شما تعداد " + sessionStorage.clickcount + " دکمه فرمان را کلیک کرده اید";
                    }
            else {
                      document.getElementById("result").innerHTML = "مرورگر شما از این شی پشتیبانی نمی کند";
                    }
            }
 </script>

<button onclick="clickCounter()" type="button">   Click me!  </button>
<div id="result">    </div>
<p>   بر روی دکمه فرمان کلیک نمایید ، تا شمارنده بالا رود </p>
<p>   سپس صفحه را بسته و مجددا باز کنید . خواهید دید که کوکی ذخیره شده ، از بین رفته و ریست شده است </p>  		کد کد

بر روی دکمه فرمان کلیک نمایید ، تا شمارنده بالا رود

سپس صفحه را بسته و مجددا باز کنید . خواهید دید که کوکی ذخیره شده ، از بین رفته و ریست شده است

خروجی
  • ابتدا در خط قرمز به بررسی این پرداخته ایم که آیا مرورگر از شی 6 پشتیبانی می کند یا خیر و کدهای لازم برای هر حالت را تعیین نموده ایم .
  • در خط سبز یک شی 6 به نام clickcount را ایجاد کرده و با هر بار کلیک بر روی دکمه فرمان یک واحد مقدار آن اضافه می شود . .
  • سپس در خط آبی مقدار شی  localStorage را خوانده و آن را در یک عنصر Html به نام result ریخته و نمایش داده ایم .
  • در نهایت در خط آخر ، که نارنجی است ، در صورتی که مرورگر کاربر از شی localStorage پشتیبانی نکند ، یک پیام هشدار به وی نشان داده شده است .

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

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

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

نام :               
آدرس Email :  

نظر شما :  

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