آموزش ذخیره اطلاعات توسط Web Storage در HTML5

آموزش ذخیره اطلاعات توسط Web Storage در HTML5

Quick Guide To Web Storage

آموزش Web Storage

 

نحوه ذخیره‌سازی و بازیابی اطلاعات در مرورگرهای وب توسط Web Storage:

تقریبا تمام اپلیکیشن های موبایل و دسکتاپ، نیاز دارند تا اطلاعات و داده های کاربران را در جایی ذخیره کنند. اما در مورد وب سایت به چه صورت است؟ در گذشته ما برای ذخیره داده ها در وب سایت، از کوکی (cookie) استفاده می کردیم. اما کوکی ها محدودیت های فراوانی دارند. HTML5 ابزار بهتری به منظور ذخیره اطلاعات دراختیار ما قرار می دهد. یکی از این ابزارها IndexedDB می باشد که این روزها همانند کوکی ها کمتر استفاده می شوند. ابزار مفیدی که در HTML5 برای طراحان وب فراهم می باشد Web Storage می باشد.

 

Web Storage چیست؟

بطور کلی Web Storage و یا DOM Storage مجموعه ای از API ها می باشد که تلاش می کنند داده های سمت کاربر (client-side data) را بر روی مروگر ذخیره کند. Web Storage از کوکی سریع تر و امن تر می باشد. داده ها بر روی مرورگر ذخیره می شوند و بر خلاف کوکی ها، از شبکه (network) منتقل (transfer) نمی شوند. همچنین امکان ذخیره داده های سنگین تر نیز وجود دارد که در کوکی ها امکانش نبود. بدون آنکه روی کارایی و سرعت وب سایت تاثیری بگذارد.

آبجکت‌های web storage جهت ذخیره داده‌ها:

Web Storage دو آبجکت مفید و کاربردی را به منظور ذخیره سازی داده ها در اختیار ما قرار می دهد:

  • localStorage: توسط این آبجکت می توانید داده های موردنظر را بدون تاریخ انقضا (expiration date) بر روی مرورگر ذخیره کنید. به این معنی که داده های ذخیره شده کاربر بر روی مرورگر تا ابد باقی می ماند.
  • sessionStorage: در صورت استفاده از این آبجکت برای ذخیره سازی داده های سمت کاربر، این داده ها تا هنگامی که کاربر مرورگر (نه فقط تب-tab) را نبندد بر روی مرورگر باقی می مانند. یکی از موارد کاربرد (use case) این آبجکت هنگامی است که کاربر در حال پر کردن فرمی در وب سایت باشد. ممکن است تب مربوط به آن وب سایت بطور اتفاقی بسته شود و یا صفحه حاوی فرم تصادفا رفرش (refresh) شود. در صورتی که از این آبجکت استفاده کرده باشیم و یکی از دو مورد مذکور اتفاق بیوفتد، داده های پر شده کاربر در فرم باقی می مانند.

 

شروع بکار با Web Storage:

اکنون که با Web Storage آشنا شدیم وقت آنست که نحوه استفاده از آنرا یاد بگیریم.

 

 localStorage ذخیره‌سازی داده‌ها توسط

ذخیره داده ها از طریق localStorage بسیار ساده می باشد. فقط کافیست مقدار موردنظرتان را بعنوان یک property برای localStorage تعریف کنید. بصورت زیر:

localStorage.myText = ‘This is some text which have been stored with localStorage object’;

document.getElementById(“text”).innerHTML= localStorage.myText;

 

ذخیره‌سازی داده‌ها توسط sessionStorage:

ذخیره و بازیابی داده ها در sessionStorage مانند localStorage می باشد:

sessionStorage.myText = 'This is some text which have been stored with sessionStorage object';

document.getElementById("text").innerHTML= sessionStorage.myText;

هر دو آبجکت sessionStorage و localStorage دارای متدهای setItem() و getItem() و removeItem() می باشند. بصورت زیر می توان از این متدها استفاده کرد: 

localStorage.setItem('username','Johnny');

console.log(localStorage.getItem('username'));

localStorage.removeItem('username'); // Johnny is no more!

 

همچنین شما می توانید آنها را در یک حلقه استفاده کنید و طول آنرا چک کنید: 

console.log(localStorage.length);

for(var i in localStorage){ console.log(localStorage[i]);}

مواردی که در این مقاله مطرح شد پایه و اساس استفاده از Web Storage می باشد. در صورتی که Web Storage موارد کاربرد دیگری نیز دارد.

 

پشتیبانی مرورگرها از Web Storage

نوبت آن رسیده است که بدانیم کدامیک از مرورگرها از Web Storage پشتیبانی می کنند. برای مشاهده لیست کامل مرورگرهای پشتیبانی کننده Web Storage به وب سایت Caniuse.com مراجعه نمائید. تقریبا تمام مرورگرهای موجود در دسترس کاربران از قابلیت Web Storage حمایت می کنند ( مانند IE8 به بالا ).

 

کتابخانه های جاوا-اسکریپتی برای Web Storage:

کتابخانه هایی که در این قسمت معرفی می کنیم، از Web Storage استفاده می کنند:

Basket.js:

A simple (proof-of-concept) script loader that caches scripts with localStorage.

Basket.js

 

Kizzy:

A light-weight, cross-browser, JavaScript local storage utility.

 

LocalDB.js:

A tool that maps the structure of the databases in objects using the localStorage API.

LocalDB.js

 

Rockstage.js:

The JavaScript library for using localStorage and sessionStorage more easy.

Rockstage.js

 

Store.js:

store.js exposes a simple API for cross-browser local storage.

 

نتیجه گیری:

در این مقاله، یکی از قابلیت های مهم و کاربردی HTML5 بنام Web Storage را معرفی و شرح دادیم. کتابخانه های زیادی نیز بر اساس آن تولید شده است. ما در این آموزش تنها مفاهیم اساسی و کاربرد پایه ای Web Storage را بیان کردیم.

 

منبع: https://tutorialzine.com/2013/11/a-quick-guide-to-web-storage


برچسب‌ها:

LocalDB.jslocalStorageRockstage.jssessionStorageآموزش Web Storageاستفاده از web storageپشتیبانی مرورگرها از Web Storageدرباره web storageوب استوریج

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

10 + 4 =