shift

بررسی کلی استوریج های سمت کلاینت

بررسی کلی استوریج های سمت کلاینت

عاطفه
دسته: ابزارها  تگ ها: متدهای ذخیره سازی داده ها سمت سرور چیست , مزایای ذخیره سازی به روش کوکی چیست , مزایای ذخیره سازی به روش ذخیره سازی محلی چیست , مزایای ذخیره سازی با روش session چیست

 

ذخیره‌سازی داده به‌صورت مستقیم در مرورگر مزیت‌های بسیاری دارد، یکی از اصلی‌ترین مزیت‌های آن دسترسی سریع و مستقل شبکه به یک پایگاه داده است. 4 متد رایج و فعال برای ذخیره‌سازی داده‌ها سمت کلاینت وجود دارد که عبارتند از:

  • کوکی
  • ذخیره‌سازی محلی
  • Session های ذخیره‌سازی
  • IndexedDB
  • WebSQL (منسوخ‌شده)

 

کوکی‌ها

کوکی‌ها یک‌راه ساده و کلاسیک ذخیره‌سازی داده‌ها در یک داکیومنت هستند. عموماً کوکی‌ها داده‌ها را از سمت سرور به سمت کلاینت می‌فرستند و سپس آن‌ها را ذخیره می‌کنند و در صورت نیاز در درخواست‌های بعدی دوباره آن را به سرور ارسال می‌کنند. از کوکی‌ها می‌توان برای مواردی شبیه مدیریت جلسه‌های حساب کاربری و ردیابی اطلاعات کاربر استفاده کرد.
علاوه بر این، کوکی‌ها می‌توانند برای ذخیره داده‌ها صرفاً در سمت کلاینت‌ها استفاده شوند. به همین دلیل، آن‌ها همچنین برای ذخیره داده‌های عمومی مانند تنظیمات کاربر مورداستفاده قرار می‌گیرند.


CRUD با کوکی‌ها (ایجاد، خواندن، به‌روزرسانی و حذف)

ما می‌توانیم کوکی‌ها را به نحو زیر ایجاد کنیم، بخوانیم، به‌روزرسانی کنیم و پاک‌کنیم:


// Create
document.cookie = "user_name=Ire Aderinokun";  
document.cookie = "user_age=25;max-age=31536000;secure";

// Read (All)
console.log( document.cookie );

// Update
document.cookie = "user_age=24;max-age=31536000;secure"; 

// Delete
document.cookie = "user_name=Ire Aderinokun;expires=Thu, 01 Jan 1970 00:00:01 GMT"; 


مزایای کوکی‌ها

  • آن‌ها می‌توانند برای ارتباط با سرور استفاده شوند.
  • ما می‌توانیم به‌صورت اتوماتیک زمان منقضی شدن کوکی را تنظیم کنیم و آن‌ها را پاک‌کنیم به‌جای آنکه این کار را به‌صورت دستی انجام دهیم.

 

معایب کوکی‌ها

  • آن‌ها به زمان بارگذاری صفحات سند اضافه می‌کنند.
  • آن‌ها مقدار کمی از داده را ذخیره می‌کنند.
  • آن‌ها فقط می‌توانند String ها را ذخیره کنند.
  • بعضاً مسائل و مشکلات امنیتی دارند.
  • این روش برای ذخیره‌سازی سمت کلاینت برای ذخیره API های وب‌سایت پیشنهاد نمی‌شود.

 

پشتیبانی

کوکی‌ها در همه نوع مرورگر پشتیبانی می‌شوند.


ذخیره‌سازی محلی (Local Storage)

ذخیره‌سازی محلی یک نوع از API ذخیره‌سازی وب است که یک API برای ذخیره جفت داده‌های کلیدی در مرورگر است. این روش برای حل موضوع مشکلی که کوکی‌ها با ذخیره API ها داشتند ظهور کرده است و یک API امن و بصری برای ذخیره‌سازی ساده داده‌ها در مرورگر ارائه می‌دهد.
اگرچه ازلحاظ فنی ما تنها می‌توانیم String ها را در ذخیره‌سازی محلی ذخیره کنیم و این کار می‌تواند با ذخیره‌سازی رشته‌ای json انجام شود. این روش به ما اجازه می‌دهد اطلاعات پیچیده‌تری را نسبت به زمانی که از کوکی‌ها استفاده می‌کنیم ذخیره کنیم.


 CRUD با ذخیره‌ سازی محلی

ما می‌توانیم به نحو زیر با ذخیره‌سازی محلی داده را ایجاد کنیم، بخوانیم، به‌روزرسانی کنیم و پاک‌کنیم:


// Create
const user = { name: 'Ire Aderinokun', age: 25 }  
localStorage.setItem('user', JSON.stringify(user));

// Read (Single)
console.log( JSON.parse(localStorage.getItem('user')) ) 

// Update
const updatedUser = { name: 'Ire Aderinokun', age: 24 }  
localStorage.setItem('user', JSON.stringify(updatedUser));

// Delete
localStorage.removeItem('user'); 


مزایای ذخیره‌سازی محلی

  • رابط کاربری بصری ساده‌تر برای ذخیره داده‌ها فراهم می‌کند (بیشتر از کوکی).
  • امنیت بیشتری برای ذخیره داده‌های سمت کلاینت فراهم می‌کند (بیشتر از کوکی).
  • اجازه می‌دهد داده‌های بیشتری را ذخیره کنیم (بیشتر از کوکی).

 

معایب ذخیره‌سازی محلی

تنها اجازه ذخیره‌سازی رشته‌ها (String) را می‌دهد.


ذخیره‌سازی Session

ذخیره‌سازی Session دومین نوع از ذخیره‌سازی API وب‌سایت است. این متد هم دقیقاً شبیه متد ذخیره‌سازی محلی است به‌جز اینکه داده‌هایی که ذخیره می‌کند فقط داده‌هایی هستند که در تب Session مرورگر قرار دارند. هنگامی‌که کاربر مرورگر را می‌بندد، داده‌ها نیز پاک می‌شود.


CRUD با ذخیره‌سازی Session

ما می‌توانیم به نحو زیر با ذخیره‌سازی Session داده را ایجاد کنیم، بخوانیم، به‌روزرسانی کنیم و پاک‌کنیم:


// Create
const user = { name: 'Ire Aderinokun', age: 25 }  
sessionStorage.setItem('user', JSON.stringify(user));

// Read (Single)
console.log( JSON.parse(sessionStorage.getItem('user')) ) 

// Update
const updatedUser = { name: 'Ire Aderinokun', age: 24 }  
sessionStorage.setItem('user', JSON.stringify(updatedUser));

// Delete
sessionStorage.removeItem('user'); 


مزایا، معایب و پشتیبانی ذخیره‌سازی Session

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


IndexedDB

IndexedDB یک‌راه حل بسیار پیچیده و جامع برای ذخیره داده‌ها در مرورگر است. این متد یک API سطح پایین برای ذخیره‌سازی مقادیر قابل‌توجهی از اطلاعات سمت کاربر است (موزیلا). IndexedDB مبتنی بر جاوا اسکریپت و شی‌ءگراست، دیتابیسی دارد که به ما اجازه می‌دهد به‌راحتی داده‌هایی را که با یک کلید ایندکس شده‌اند را ذخیره و به دست آوریم.


CRUD اصلی با IndexedDB

در همه مثال‌هایم من از کتابخانه ObeditedDB Jake Archibald استفاده می‌کنم که یک نسخه Promised-ingied از روش‌های IndexedDB را ارائه می‌دهد. استفاده از IndexedDB پیچیده‌تر از سایر روش‌های ذخیره‌سازی مرورگر است. قبل از اینکه ما هر داده‌ای را ایجاد کنیم، بخوانیم، به‌روزرسانی کنیم و پاک‌کنیم نیاز داریم که دیتابیس را بازکنیم و چیزی که نیاز داریم را ایجاد و ذخیره کنیم.


function OpenIDB() {  
    return idb.open('SampleDB', 1, function(upgradeDb) {
        const users = upgradeDb.createObjectStore('users', {
            keyPath: 'name'
        });
    });
}


برای ایجاد (به‌روزرسانی) داده‌ها در یک فروشگاه، ما باید از طریق مراحل زیر پیش برویم 


// 1. Open up the database
OpenIDB().then((db) => {  
    const dbStore = 'users';

    // 2. Open a new read/write transaction with the store within the database
    const transaction = db.transaction(dbStore, 'readwrite');
    const store = transaction.objectStore(dbStore);

    // 3. Add the data to the store
    store.put({
        name: 'Ire Aderinokun',
        age: 25
    });

    // 4. Complete the transaction
    return transaction.complete;
})

برای بازیابی داده‌ها، ما باید از طریق زیر اقدام کنیم.


// 1. Open up the database
OpenIDB().then((db) => {  
    const dbStore = 'users';

    // 2. Open a new read-only transaction with the store within the database
    const transaction = db.transaction(dbStore);
    const store = transaction.objectStore(dbStore);

    // 3. Return the data
    return store.get('Ire Aderinokun');
}).then((item) => {
    console.log(item);
})

سرانجام، برای حذف داده‌ها، ما باید موارد زیر را انجام دهیم.


// 1. Open up the database
OpenIDB().then((db) => {  
    const dbStore = 'users';

    // 2. Open a new read/write transaction with the store within the database
    const transaction = db.transaction(dbStore, 'readwrite');
    const store = transaction.objectStore(dbStore);

    // 3. Delete the data corresponding to the passed key
    store.delete('Ire Aderinokun');

    // 4. Complete the transaction
    return transaction.complete;
})

 

مزایای IndexedDB

  • می‌توان داده‌های پیچیده‌تر و ساختاریافته‌تری را مدیریت کرد.
  • می‌تواند چند پایگاه داده و جداول در هر "پایگاه داده" داشته باشد.
  • فضای بیشتری برای ذخیره‌سازی دارد.
  • کنترل بیشتر بر چگونگی تعامل با آن می‌توانیم داشته باشیم.

 

معایب IndexedDB

کار با آن پیچیده‌تر از API ذخیره‌سازی وب (Web Storage API) است.


WebSQL

WebSQL یک API برای یک پایگاه داده رابطه‌ای در سرویس‌گیرنده است، شبیه به SQLite. از سال 2010، W3C گروه برنامه‌های کاربردی وب‌سایت کاربر روی مشخصات آن را متوقف کردند. این متد دیگر بخشی از مشخصات HTML نیست و نباید مورداستفاده قرار گیرد.


یک مقایسه:
 

Feature Cookies Local Storage Session Storage IndexedDB
Storage Limit ~4KB ~5MB ~5MB Up to half of hard drive
Persistent Data? Yes Yes No Yes
Data Value Type String String String Any structured data
Indexable? No No No Yes

 

نظر خود را بنویسید...
ارسال نظر
لغو