آموزش HTML - حافظه وب

حافظه وب (Web Storage)

حافظه وب در HTML (HTML Web storage) مکانیزمی است که برای ذخیره‌سازی داده‌های ساختاریافته در سمت کلاینت (مرورگر کاربر) بدون ارسال آن‌ها به سرور استفاده می‌شود. این دو مکانیزم ذخیره‌سازی عبارت‌اند از حافظه نشست (session storage) و حافظه محلی (local storage). هر دوی این‌ها بخش‌هایی از API حافظه وب در HTML5 هستند.

نیاز به حافظه وب

حافظه وب در HTML برای برطرف کردن معایب و محدودیت‌های کوکی‌ها (cookies) معرفی شد:

• کوکی‌ها همراه با هر درخواست HTTP ارسال می‌شوند و در نتیجه با انتقال مداوم داده‌های تکراری، سرعت برنامه وب شما را کاهش می‌دهند.
• کوکی‌ها همراه با هر درخواست HTTP ارسال می‌شوند و داده‌ها را به صورت رمزنگاری‌نشده در اینترنت منتقل می‌کنند.
• حجم کوکی‌ها محدود به حدود ۴ کیلوبایت است که برای ذخیره داده‌های مورد نیاز کافی نیست.

انواع حافظه وب

HTML دو نوع حافظه وب ارائه می‌دهد:

• حافظه نشست (Session storage)
• حافظه محلی (Local storage)

برای استفاده از این دو حافظه وب (session storage یا local storage) در برنامه وب خود، می‌توانید به ترتیب از طریق ویژگی‌های window.sessionStorage و window.localStorage به آن‌ها دسترسی داشته باشید.

حافظه نشست (Session Storage)

حافظه نشست (session storage) موقت است و با پایان یافتن نشست صفحه (یعنی زمانی که تب یا پنجره مرورگر بسته می‌شود) پاک می‌شود. داده‌های ذخیره‌شده در حافظه نشست مخصوص هر تب یا پنجره است.

HTML5 ویژگی sessionStorage را معرفی می‌کند که سایت‌ها از آن برای افزودن داده به حافظه نشست استفاده می‌کنند. این داده‌ها برای هر صفحه‌ای از همان سایت که در آن پنجره باز شود (یعنی در همان نشست یا session) قابل دسترسی خواهد بود و به محض بستن پنجره، این نشست از بین می‌رود.

مثال

کد زیر یک متغیر نشست تعریف کرده و به آن دسترسی پیدا می‌کند −

<!DOCTYPE html>
<html>
<body>
   <script type="text/javascript">	
      if( sessionStorage.hits ){
         sessionStorage.hits = Number(sessionStorage.hits) +1;
      } else {
         sessionStorage.hits = 1;
      }
      document.write("Total Hits :" + sessionStorage.hits );
   </script>
   <p>Refresh the page to increase number of hits.</p>
   <p>Close the window and open it again and check the result.</p>
</body>	
</html>

حافظه محلی (Local Storage)

حافظه محلی (local storage) برای ذخیره‌سازی داده‌هایی طراحی شده است که در میان پنجره‌های مختلف به اشتراک گذاشته می‌شوند و فراتر از نشست فعلی باقی می‌مانند. این حافظه تاریخ انقضا ندارد و تا زمانی که کاربر یا برنامه وب آن را به صورت دستی حذف نکند، در مرورگر باقی می‌ماند. به‌ویژه برنامه‌های وب ممکن است به دلایل مربوط به عملکرد (پرکارایی)، تمایل داشته باشند مگابایت‌ها داده کاربر مانند کل اسناد نوشته‌شده توسط کاربر یا صندوق پیام‌های او را در سمت کلاینت ذخیره کنند.

باز هم باید گفت که کوکی‌ها این حالت را به خوبی مدیریت نمی‌کنند، زیرا همراه با هر درخواست ارسال می‌شوند.

HTML5 ویژگی localStorage را معرفی می‌کند که برای دسترسی به فضای حافظه محلی صفحه بدون محدودیت زمانی استفاده می‌شود و این حافظه محلی هر زمان که از آن صفحه استفاده کنید در دسترس خواهد بود.

مثال

کد زیر یک متغیر حافظه محلی را تنظیم کرده و هر بار که به این صفحه دسترسی پیدا کنید (حتی دفعه بعد که پنجره را باز می‌کنید) به آن متغیر دسترسی می‌یابد −

<!DOCTYPE html>
<html>
<body>
   <script type="text/javascript">
      if( localStorage.hits ){
         localStorage.hits = Number(localStorage.hits) +1;
      } else {
         localStorage.hits = 1;
      }
      document.write("Total Hits :" + localStorage.hits );
   </script>
   <p>Refresh the page to increase number of hits.</p>
   <p>Close the window and open it again and check the result.</p>
</body>
</html>

حذف حافظه وب (Delete Web Storage)

ذخیره‌سازی داده‌های حساس روی سیستم محلی می‌تواند خطرناک باشد و یک رخنه امنیتی ایجاد کند. داده‌های حافظه نشست (session storage) بلافاصله پس از پایان نشست توسط مرورگرها حذف می‌شوند.

اما برای پاک کردن تنظیمات حافظه محلی، باید localStorage.remove('key') را فراخوانی کنیم که در آن 'key' همان کلید مقداری است که می‌خواهیم حذف کنیم. اگر بخواهیم تمام تنظیمات را پاک کنیم، متد localStorage.clear() قابل فراخوانی است.

مثال

کد زیر کل حافظه محلی را پاک می‌کند −

<!DOCTYPE html>
<html>
<body>
   <script type="text/javascript">
      localStorage.clear();
      
      // Reset number of hits.
      if( localStorage.hits ){
         localStorage.hits = Number(localStorage.hits) +1;
      } else {
         localStorage.hits = 1;
      }
      document.write("Total Hits :" + localStorage.hits );
   </script>
   <p>Refreshing the page would not to increase hit counter.</p>
   <p>Close the window and open it again and check the result.</p>
</body>
</html>