ذخیره سازی داده برای جاوا اسکریپت جلویی

گزینه‌های خود را برای ذخیره‌سازی داده‌های درون مرورگر با جاوا اسکریپت بررسی کنید، از جمله متغیرهای داخلی، localStorage، IndexedDB، و API cache service worker.

• متغیرهای جاوا اسکریپت
• ذخیره داده ها در سرور
• API ذخیره سازی وب
• کوکی‌ها
• IndexedDB
• API حافظه پنهان کارگر سرویس
• نتیجه‌گیری

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

متغیرهای جاوا اسکریپت

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

عیب استفاده از متغیرها برای ذخیره داده این است که آنها به عمر برنامه در حال اجرا محدود می شوند. هنگامی که برنامه خارج می شود، متغیرها از بین می روند. البته، ممکن است قبل از پایان برنامه از بین بروند، اما طولانی ترین متغیر جهانی با برنامه ناپدید می شود. در مورد مرورگر وب و برنامه های جاوا اسکریپت آن، حتی با یک کلیک دکمه refresh وضعیت برنامه را از بین می برد. این واقعیت نیاز به پایداری داده را برمی انگیزد. یعنی داده هایی که عمر خود برنامه را بیشتر می کنند.

یک عارضه دیگر با جاوا اسکریپت مرورگر این است که یک محیط sandboxed است. به دلیل نصب نبودن به سیستم عامل دسترسی مستقیم ندارد. یک برنامه جاوا اسکریپت به نمایندگی APIهای مرورگری که در آن اجرا می شود متکی است.

ذخیره داده ها در سرور

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

تا کنون، ما بین گذرا بودن متغیرها و ماندگاری پایداری سمت سرور را انتخاب می‌کنیم. هر رویکرد دارای مشخصات خاصی از نظر طول عمر و سادگی است. اما چند گزینه دیگر ارزش کاوش را دارند.

API ذخیره سازی وب

دو نوع “ذخیره سازی وب” داخلی در مرورگرهای مدرن وجود دارد: localStorage و sessionStorage. اینها به شما دسترسی راحت به داده های با عمر طولانی تر می دهد. هر دو به شما یک مقدار کلید می دهند و هر کدام چرخه حیات خاص خود را دارند که نحوه مدیریت داده ها را کنترل می کند:

• localStorage یک جفت کلید-مقدار را ذخیره می‌کند که در بارگذاری‌های صفحه در همان دامنه باقی می‌ماند.
• sessionStorage مشابه localStorage عمل می‌کند، اما داده‌ها فقط تا زمانی که جلسه صفحه.

در هر دو مورد، مقادیر به یک رشته اجباری می‌شوند، به این معنی که یک عدد به نسخه رشته‌ای از خودش و یک شی تبدیل به “[object Object] می‌شود.” بدیهی است که این چیزی نیست که شما می خواهید، اما اگر می خواهید یک شی را ذخیره کنید، همیشه می توانید از JSON.stringify() و JSON.parse() استفاده کنید.

هم localStorage و هم sessionStorage از getItem و setItem برای تنظیم و بازیابی مقادیر استفاده می کنند:

localStorage.setItem("foo","bar");
sessionStorage.getItem("foo"); // returns “bar”

با تنظیم یک مقدار روی آنها و سپس بستن برگه مرورگر، سپس باز کردن مجدد برگه در همان دامنه و بررسی مقدار خود، می توانید تفاوت بین این دو را به وضوح مشاهده کنید. مقادیر ذخیره شده با استفاده از localStorage همچنان وجود خواهند داشت، در حالی که sessionStorage پوچ خواهد بود. می توانید از کنسول devtools برای اجرای این آزمایش استفاده کنید:

localStorage.setItem("foo",”bar”);
sessionStorage.setItem("foo","bar");
// close the tab, reopen it
localStorage.getItem('bar2'); // returns “bar”
sessionStorage.getItem("foo") // returns null

کوکی‌ها

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

کوکی‌ها به درخواست‌ها و پاسخ‌های سرور متصل می‌شوند و می‌توانند (با محدودیت‌هایی که توسط قوانین کنترل می‌شوند) توسط مشتری و سرور تغییر یابند. کتابخانه های مفیدی مانند کوکی جاوا اسکریپت کار با کوکی ها را ساده می کند.

کوکی‌ها وقتی مستقیماً مورد استفاده قرار می‌گیرند کمی بداخلاق هستند، که میراث باستانی آنهاست. آنها برای دامنه در ویژگی document.cookie، در قالبی که شامل مقدار، زمان انقضا (در قالب RFC 5322) و مسیر است، تنظیم شده‌اند. اگر انقضا تنظیم نشده باشد، پس از بسته شدن مرورگر، کوکی ناپدید می شود. مسیر تعیین می‌کند که کدام مسیر در دامنه برای کوکی معتبر است.

در اینجا مثالی از تنظیم مقدار کوکی آورده شده است:

document.cookie = "foo=bar; expires=Thu, 18 Dec 2024 12:00:00 UTC; path=/";

و برای بازیابی مقدار:

function getCookie(cname) {
  const name = cname + "=";
  const decodedCookie = decodeURIComponent(document.cookie);
  const ca = decodedCookie.split(';');
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) === ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) === 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
const cookieValue = getCookie("foo");
console.log("Cookie value for 'foo':", cookieValue);

در بالا، ما از decodeURIcomponent برای باز کردن بسته بندی کوکی و سپس شکستن آن در امتداد کاراکتر جداکننده آن، نقطه ویرگول (;) برای دسترسی به اجزای سازنده آن استفاده می کنیم. برای به دست آوردن مقداری که با نام کوکی مطابقت داریم به اضافه علامت تساوی.

یک نکته مهم در مورد کوکی ها امنیت است، به ویژه اسکریپت بین سایتی (XSS) و جعل درخواست بین سایتی (CSRF) حملات. (تنظیم HttpOnly روی یک کوکی باعث می شود که فقط در سرور قابل دسترسی باشد، که امنیت را افزایش می دهد اما ابزار کوکی را در مرورگر حذف می کند.)

IndexedDB

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

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

هنگامی که یک شی ذخیره در IndexedDB ایجاد می کنید، با دامنه مرتبط می شود و تا زمانی که کاربر آن را حذف نکند، ادامه می یابد. می‌توان از آن به‌عنوان یک داده آفلاین برای مدیریت عملکرد آفلاین در برنامه‌های وب پیشرو، به سبک Google Docs استفاده کرد.

برای دریافت طعم استفاده از IndexedDB، در اینجا می‌توانید یک فروشگاه جدید ایجاد کنید:

let db = null; // A handle for the DB instance

llet request = indexedDB.open("MyDB", 1); // Try to open the “MyDB” instance (async operation)
request.onupgradeneeded = function(event) { // onupgradeneeded is the event indicated the MyDB is either new or the schema has changed
  db = event.target.result; // set the DB handle to the result of the onupgradeneeded event
  if (!db.objectStoreNames.contains("myObjectStore")) { // Check for the existence of myObjectStore. If it doesn’t exist, create it in the next step
    let tasksObjectStore = db.createObjectStore("myObjectStore", { autoIncrement: true }); // create myObjectStore
  }
};

فراخوانی به request.onsuccess = function(event) { db = event.target.result; }; // onsuccess زمانی فعال می شود که پایگاه داده با موفقیت باز شود. اگر فروشگاه DB و Object از قبل وجود داشته باشد، بدون شلیک onupgradeneed فعال می‌شود. در این مورد، ما مرجع db:

را ذخیره می کنیم

request.onerror = function(event) { console.log("Error in db: " + event); }; // If an error occurs, onerror will fire

کد IndexedDB بالا ساده است – فقط یک پایگاه داده و ذخیره اشیاء را باز یا ایجاد می کند – اما کد به شما حس ماهیت ناهمزمان IndexedDB را می دهد.< /p>

Web SQL (منسوخ شده)

زمانی یک پایگاه داده SQL در مرورگرها ساخته شده بود و از طریق Web SQL API قابل دسترسی بود. هنوز وجود دارد اما مدتهاست که منسوخ شده است. اکنون باید از IndexedDB استفاده کنید.

API حافظه نهان کارگر سرویس

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

در اینجا نگاهی به کش کردن پاسخ با استفاده از یک استراتژی cache-first می‌اندازیم، که در آن ابتدا سعی می‌کنید پاسخ را از حافظه پنهان دریافت کنید، سپس به شبکه برگردانید (پاسخ را در حافظه پنهان ذخیره کنید):

self.addEventListener('fetch', (event) => {
  const request = event.request;
  const url = new URL(request.url);
  // Try serving assets from cache first
  event.respondWith(
    caches.match(request)
      .then((cachedResponse) => {
        // If found in cache, return the cached response
        if (cachedResponse) {
          return cachedResponse;
        }
        // If not in cache, fetch from network
        return fetch(request)
          .then((response) => {
            // Clone the response for potential caching
            const responseClone = response.clone();
            // Cache the new response for future requests
            caches.open('my-cache')
              .then((cache) => {
                cache.put(request, responseClone);
              });
            return response;
          });
      })
  );
});

این یک رویکرد بسیار قابل تنظیم به شما می دهد زیرا به اشیاء درخواست و پاسخ دسترسی کامل دارید.

نتیجه گیری

ما به گزینه‌های متداول برای ماندگاری داده‌ها در مرورگر پروفایل‌های مختلف نگاه کرده‌ایم. هنگام تصمیم گیری برای استفاده از کدام یک، یک الگوریتم مفید این است: ساده ترین گزینه ای که نیازهای من را برآورده می کند چیست؟ نگرانی دیگر امنیت است، به خصوص در مورد کوکی ها.

امکانات جالب دیگری با استفاده از WebAssembly برای ذخیره سازی مداوم توانایی Wasm برای اجرای بومی روی دستگاه می‌تواند عملکرد را افزایش دهد. استفاده از Wasm برای ماندگاری داده را روزی دیگر بررسی خواهیم کرد.