web storage در html5

Web Storage

فصل چهارم ( معرفی HTML5 )

جلسه دوازدهم (Web Storage در HTML5 )

سلام خدمت همراهان عزیز مدرسه مجازی ایرانیان

دوستان در این جلسه ، Web Storage در HTML5 رو به شما معرفی میکنم . Web Storage یکی از API های HTML5 هست که میتونید از این تکنولوژی کاربردی به راحتی استفاده کنید .

Web Storage

با استفاده از این API شما میتونید داده ها و اطلاعات رو در مرورگر ذخیره کنید . این API شبیه به Cookie عمل میکنه . اما امن تر و سریع تر از Cookie هست . این قابلیت میتونه داده های حجیم رو هم ذخیره کنه بدون اینکه در عملکرد صحیح سایت تاثیر منفی بذاره .

این قابلیت در مرورگرهای Internet Explorer 8+, Firefox, Opera, Chrome, Safari پشتیبانی میشه .

Web Storage از دو object زیر برای ذخیره سازی داده ها استفاده میکنه :

window.localStorage : داده هارو بدون تاریخ انقضاء ذخیره میکنه .

code.sessionStorage : داده ها رو در یک session ذخیره میکنه و با بستن مرورگر داده ها حذف خواهند شد .

قبل از اینکه بخواین از web storage استفاده کنید ، مطمئن بشید که مرورگر شما از localStorage و sessionStorage پشتیبانی میکنه . برای اینکار در جاوا اسکریپت ما به این صورت web storage رو تعریف می کنیم . اگر مرورگر این دو object رو شناسایی کرد ، خوب عملیات رو انجام بده اما اگر شناسایی نکرد به کاربر پیغامی رو نمایش میده مبنی بر اینکه این مرورگر توانایی پشتیبانی از این تکنولوژی رو نداره :

if(typeof(Storage)!=="undefined")
  {
  // Code for localStorage/sessionStorage.
  }
else
  {
  // Sorry! No Web Storage support..
}

if(typeof(Storage)!=="undefined")

{

// Code for localStorage/sessionStorage.

}

else

{

// Sorry! No Web Storage support..

}

localStorage Object

این object داده ها و اطلاعات رو بدون تاریخ انقضاء ذخیره سازی میکنه . اطلاعات با بستن مرورگر از بین نمیره و روزها ، ماه ها و سال ها در مرورگر شما باقی میمونه .

localStorage.setItem("lastname", "rahimi");
document.getElementById("result").innerHTML=localStorage.getItem("lastname");

۱ ۲	localStorage.setItem("lastname", "rahimi"); document.getElementById("result").innerHTML=localStorage.getItem("lastname");

کد بالا مقداری رو بصورت رشته در lastname ذخیره میکنه و در عنصری با آی دی result نمایش میده .

این کد رو بصورت زیر هم میتونید بنویسید :

localStorage.lastname = "rahimi";
document.getElementById("result").innerHTML=localStorage.lastname;

۱ ۲	localStorage.lastname = "rahimi"; document.getElementById("result").innerHTML=localStorage.lastname;

برای حذف مقادیر ذخیره شده هم از دستور زیر استفاده می کنیم :

localStorage.removeItem("lastname");

۱	localStorage.removeItem("lastname");

به عنوان مثال کدی رو براتون قرار میدم که تعداد کلیک های شما رو روی دکمه ذخیره میکنه و تعداد کلیک هارو نمایش میده و چون توسط localStorage این عمل انجام شده ، با بستن مرورگر هم این تعداد reset نمیشه :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
   body{font: 13px/15px tahoma; text-align: right; direction: rtl;}
</style>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
  {
  if (localStorage.clickcount)
    {
    localStorage.clickcount=Number(localStorage.clickcount)+1;
    }
  else
    {
    localStorage.clickcount=1;
    }
  document.getElementById("result").innerHTML="تعداد کلیک شما روی دکمه " + localStorage.clickcount + " کلیک .";
  }
else
  {
  document.getElementById("result").innerHTML="متاسفانه ، مرورگر شما این قابلیت رو پشتیبانی نمیکند .";
  }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>بر روی دکمه کلیک کنید تا تعداد دفعات را ببینید .</p>
<p>مرورگر خود را ببندید و دوباره شروع کنید اما تعداد کلیک های شما reset نخواهد شد .</p>
</body>
</html>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

<!DOCTYPE html>

<html>

<head>

<style>

body{font: ۱۳px/15px tahoma; text-align: right; direction: rtl;}

</style>

function clickCounter()

{

if(typeof(Storage)!=="undefined")

{

if (localStorage.clickcount)

{

localStorage.clickcount=Number(localStorage.clickcount)+۱;

}

else

{

localStorage.clickcount=۱;

}

document.getElementById("result").innerHTML="تعداد کلیک شما روی دکمه " + localStorage.clickcount + " کلیک .";

}

else

{

document.getElementById("result").innerHTML="متاسفانه ، مرورگر شما این قابلیت رو پشتیبانی نمیکند .";

}

</script>

</head>

<body>

<p><button onclick="clickCounter()" type="button">Click me!</button></p>

<p>بر روی دکمه کلیک کنید تا تعداد دفعات را ببینید .</p>

<p>مرورگر خود را ببندید و دوباره شروع کنید اما تعداد کلیک های شما reset نخواهد شد .</p>

</body>

</html>

کد بالا رو در یک فایل html ذخیره کنید و اجرا کنید تا نتیجه رو ببینید . البته فایل در انتهای جلسه ضمیمه میشه و میتونید دانلود کنید .

sessionStorage Object

این object هم دقیقا مثل localStorage عمل میکنه ، با این تفاوت که در sessionStorage داده ها در یک session ذخیره میشه و با بستن مرورگر داده ها حذف میشه . نمونه کد زیر ، دقیقا مثالی هست که در بالا براتون گذاشتم ، تعداد کلیک هارو محاسبه میکنه و نمایش میده اما تفاوت این دو کد در اینه که تعداد کلیک ها با بستن مرورگر reset میشه :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
   body{font: 13px/15px tahoma; text-align: right; direction: rtl;}
</style>
<script>
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>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>بر روی دکمه کلیک کنید تا تعداد دفعات را ببینید .</p>
<p>مرورگر را ببندید ، مجدد باز کنید ، حالا روی دکمه کلیک کنید ، بخاطر اینکه از sessionStorage استفاده کردیم تعداد کلیک ها reset شد .</p>
</body>
</html>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

<!DOCTYPE html>

<html>

<head>

<style>

body{font: ۱۳px/15px tahoma; text-align: right; direction: rtl;}

</style>

function clickCounter()

{

if(typeof(Storage)!=="undefined")

{

if (sessionStorage.clickcount)

{

sessionStorage.clickcount=Number(sessionStorage.clickcount)+۱;

}

else

{

sessionStorage.clickcount=۱;

}

document.getElementById("result").innerHTML="تعداد کلیک شما روی دکمه " + sessionStorage.clickcount + " کلیک .";

}

else

{

document.getElementById("result").innerHTML="متاسفانه ، مرورگر شما این قابلیت رو پشتیبانی نمیکند .";

}

</script>

</head>

<body>

<p><button onclick="clickCounter()" type="button">Click me!</button></p>

<p>بر روی دکمه کلیک کنید تا تعداد دفعات را ببینید .</p>

<p>مرورگر را ببندید ، مجدد باز کنید ، حالا روی دکمه کلیک کنید ، بخاطر اینکه از sessionStorage استفاده کردیم تعداد کلیک ها reset شد .</p>

</body>

</html>

خوب این جلسه هم به اتمام رسید . امیدوارم مفید واقع شده باشه 🙂

تهیه شده در مدرسه مجازی ایرانیان

دریافت فایل

رمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com

آموزش طراحی وب

مدرسه مجازی ایرانیان

آموزش گرافیک

آموزش CSS

آموزش HTML

آموزش Jquery

آموزش PHP

آموزش وردپرس

مقالات آموزشی

فیلم های آموزشی

دانلودها

web storage در html5

جلسه دوازدهم (Web Storage در HTML5 )

Web Storage

localStorage Object

sessionStorage Object

<< مشاهده مطلب قبلی

مشاهده مطلب بعدی >>

گردآوری و تالیف : میترا رحیمی

آموزش های مرتبط با این مطلب

شروع فصل پروژه ی عملی html

Drag and Drop در HTML5

SVG در HTML5

رسم دایره در canvas

سبک های رنگ آمیزی در canvas

تعریف و ساخت canvas در HTML5

دیدگاه های مخاطبین

وبلاگ مدرسه

مدرسین مدرسه

حسین همت یار

آخرین پرسش و پاسخ ها

جلسه دوازدهم (Web Storage در HTML5 )

Web Storage

localStorage Object

sessionStorage Object

<< مشاهده مطلب قبلی

مشاهده مطلب بعدی >>

خوراک خوشمزه و علمی روزانه

با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

شروع فصل پروژه ی عملی html

Drag and Drop در HTML5

SVG در HTML5

رسم دایره در canvas

سبک های رنگ آمیزی در canvas

تعریف و ساخت canvas در HTML5

حسین همت یار