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

بیایید وصل شویم! برای پروژه های جدید من را در GitHub دنبال کنید.

مقدمه

هنگام ساختن برنامه های وب ، انتخاب مکانیسم ذخیره سازی مناسب برای عملکرد ، امنیت و تجربه کاربر بسیار مهم است. توسعه دهندگان وب اغلب گزینه های ذخیره سازی چندگانه مانند LocalStorage ، SessionStorage ، کوکی ها ، IndexedDB ، SQLite ، Web SQL و Cache APIبشر هرکدام نقاط قوت ، ضعف و موارد استفاده ایده آل خود را دارند.

در این مقاله ، انواع مختلف ذخیره سازی موجود در برنامه های وب مدرن را بررسی خواهیم کرد ، با مثال هایی که نحوه استفاده مؤثر از آنها را نشان می دهد.

1. محل محلی

نمای کلی

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

خصوصیات

فروشگاه تا 5 مگابایت در هر مبدا

داده ها به طور نامحدود ادامه می یابد مگر اینکه صریحاً حذف شود.

API همزمان، که ممکن است موضوع اصلی در عملیات بزرگ را مسدود کند.

قابل دسترسی از طریق window.localStorageبشر

مثال استفاده

// Storing data
localStorage.setItem("username", "Austin");

// Retrieving data
const user = localStorage.getItem("username");
console.log(user); // Output: Austin

// Removing data
localStorage.removeItem("username");

// Clearing all localStorage
localStorage.clear();

بهترین موارد استفاده

ذخیره تنظیمات برگزیده کاربر (به عنوان مثال ، تنظیمات موضوع).

ذخیره سازی داده های کاربردی کوچکبشر

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

2. SessionStorage

نمای کلی

SessionStorage مشابه LocalStorage است اما فقط برای مدت زمان جلسه ادامه دارد.

خصوصیات

فروشگاه تا 5 مگابایت در هر مبدا

داده ها منقضی شدن وقتی کاربر برگه یا مرورگر را می بندد.

API همزمان، درست مثل LocalStorage.

مثال استفاده

// Storing session data
sessionStorage.setItem("sessionID", "123456");

// Retrieving data
const sessionId = sessionStorage.getItem("sessionID");
console.log(sessionId); // Output: 123456

// Removing session data
sessionStorage.removeItem("sessionID");

// Clearing all sessionStorage
sessionStorage.clear();

بهترین موارد استفاده

داده های جلسه موقت (به عنوان مثال ، پیش نویس فرم ، فرم های چند مرحله ای).

داده هایی که باید در جلسات پابرجا نیستبشر

3. کوکی ها

نمای کلی

کوکی ها قطعات کوچکی از داده ها را ذخیره می کنند که می توانند با درخواست HTTP به سرور ارسال شوند. آنها معمولاً برای تأیید اعتبار و ردیابی استفاده می شوند.

خصوصیات

حداکثر اندازه: 4 کیلوبایت در هر کوکی

داده ها همچنان بر اساس تنظیمات انقضا.

در دسترس هم در مشتری و هم در سمت سروربشر

به طور خودکار با درخواست HTTP ارسال می شود.

مثال استفاده

تنظیم کوکی

document.cookie = "user=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

بازیابی کوکی

console.log(document.cookie); // Output: user=John

حذف کوکی

document.cookie = "user=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

بهترین موارد استفاده

نشانه های احراز هویت (هنگام استفاده HttpOnly وت Secure پرچم ها).

تنظیمات برگزیده کاربر این باید به سرور ارسال شود.

پیگیری جلسه برای تجزیه و تحلیل

4. IndexedDB

نمای کلی

IndexedDB یک پایگاه داده NOSQL سمت مشتری است که ذخیره سازی داده های ساختاری ، از جمله اشیاء و پرونده ها را امکان پذیر می کند.

خصوصیات

API ناهمزمان، جلوگیری از مسدود کردن UI.

فروشگاه حداکثر صدها Mbs در هر مبدا

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

خوب کار می کند ذخیره داده های در مقیاس بزرگبشر

مثال استفاده

const request = indexedDB.open("myDatabase", 1);

request.onupgradeneeded = function(event) {
    let db = event.target.result;
    db.createObjectStore("users", { keyPath: "id" });
};

request.onsuccess = function(event) {
    let db = event.target.result;
    let transaction = db.transaction("users", "readwrite");
    let store = transaction.objectStore("users");

    store.add({ id: 1, name: "Austin" });

    store.get(1).onsuccess = function(event) {
        console.log(event.target.result); // Output: {id: 1, name: "Austin"}
    };
};

بهترین موارد استفاده

برنامه های آفلاین (به عنوان مثال ، برنامه های وب مترقی – PWAS).

ذخیره داده های ساخت یافته بزرگبشر

جایگزینی محلی برای نیازهای ذخیره سازی پیچیدهبشر

5. sqlite

نمای کلی

SQLite یک پایگاه داده رابطه ای سبک است که به عنوان یک فایل واحد اجرا می شود ، که اغلب در آن استفاده می شود برنامه های دسک تاپ ، موبایل و سروربشر

خصوصیات

مبتنی بر SQL، ارائه ذخیره سازی رابطه ای.

به صورت آفلاین کار می کند بدون نیاز به سرور پایگاه داده.

استفاده شده در برنامه های الکترونیکی ، برنامه های تلفن همراه (React Native ، Flutter) و برخی از پسوندهای مرورگربشر

مثال استفاده (node.js)

const sqlite3 = require('sqlite3').verbose();
let db = new sqlite3.Database(':memory:');

db.serialize(() => {
    db.run("CREATE TABLE users (id INT, name TEXT)");
    db.run("INSERT INTO users (id, name) VALUES (1, 'Austin')");

    db.each("SELECT id, name FROM users", (err, row) => {
        console.log(row.id + ": " + row.name);
    });
});

db.close();

بهترین موارد استفاده

ذخیره سازی ساختاری مداوم در برنامه های دسک تاپ و تلفن همراهبشر

به پایگاه داده سبک وزن نیاز دارد بدون نیاز به سرور

6. وب SQL (مستهلک)

نمای کلی

وب SQL ذخیره سازی مبتنی بر SQL را در مرورگرها فراهم کرد اما به دلیل عدم پذیرش از بین رفت.

خصوصیات

توسط W3C کاهش یافته و برای پروژه های جدید توصیه نمی شود.

فقط در کروم و سافاری (نه فایرفاکس یا لبه).

7. Cache API (کارگران سرویس)

نمای کلی

Cache API به کارگران سرویس اجازه می دهد تا پاسخ های HTTP را ذخیره و بازیابی کنند و تجربه های آفلاین را فعال کنند.

خصوصیات

پاسخ های HTTP را ذخیره می کند ، و برنامه ها را تهیه می کند بار سریعتربشر

کار می کند زیر با کارگران خدماتی

استفاده شده در برنامه های وب مترقی (PWAS)بشر

مثال استفاده

caches.open("my-cache").then(cache => {
    cache.add("/styles.css");
});

// Retrieving cached data
caches.match("/styles.css").then(response => {
    if (response) {
        console.log("Cached response found!", response);
    }
});

بهترین موارد استفاده

ذخیره دارایی برای عملکرد (به عنوان مثال ، شیوه نامه ها ، تصاویر).

قابلیت های آفلاین در PWAS

جدول مقایسه

نوع ذخیره سازی	حد مجاز اندازه	تداوم	توسط سرور قابل دسترسی است؟	ناهمزمان؟	بهترین استفاده
محل کار محلی	5 مگابایت	دائمی	نه	نه	تنظیمات کاربر ، حافظه پنهان
ذخیره سازی	5 مگابایت	تا زمانی که برگه بسته شود	نه	نه	داده های موقت
کوکی ها	4 کیلوبایت	قابل تنظیم	بله	نه	احراز هویت ، ردیابی
indexeddb	صدها مگابایت	دائمی	نه	بله	داده های ساخت یافته بزرگ
ساق پا	GBS	دائمی	بله (برای برنامه ها)	بله	ذخیره پایگاه داده
Cache API	متفاوت است	قابل تنظیم	نه	بله	دارایی های ذخیره سازی

پایان

انتخاب روش ذخیره سازی مناسب به این بستگی دارد اندازه داده ها ، نیازهای پایداری ، امنیت و عملکردبشر

• برای داده های کاربر کوچک: استفاده کردن محل کار محلی یا ذخیره سازیبشر
• برای تأیید اعتبار و ردیابی: استفاده کردن کوکی هابشر
• برای داده های ساخت یافته بزرگ: استفاده کردن indexeddb یا ساق پابشر
• برای ذخیره سازی آفلاین: استفاده کردن Cache APIبشر

شرح متا

کاوش های محلی ، کوکی ها ، IndexedDB ، SQLite و موارد دیگر را کشف کنید! بیاموزید که چگونه هر راه حل ذخیره سازی وب با نمونه های دنیای واقعی کار می کند.

TLDR – نکات برجسته برای اسکیمرها

• محل کار محلی واد ذخیره سازی برای ذخیره سازی ساده ارزش کلید.
• کوکی ها برای تأیید اعتبار و ارتباط سرور.
• indexeddb برای ذخیره سازی ساختاری ، آفلاین.
• ساق پا برای ذخیره سازی شبیه به پایگاه داده در برنامه ها.
• Cache API برای استراتژی های آفلاین اول.

از چه راه حل ذخیره سازی بیشترین استفاده را دارید؟ در نظرات به ما اطلاع دهید!