‏Brownies: مدیریت ذخیره‌سازی مرورگر با سینتکس ساده

Brownies یه کتابخونه‌ی سبک جاوااسکریپته که هدفش اینه کار با مکانیزم‌های ذخیره‌سازی مرورگر رو راحت‌تر کنه. به جای اینکه با APIهای مختلف و verbose کشتی بگیری، با یه سینتکس یکدست و آشنا همه چیز رو مدیریت می‌کنی.

با Brownies، کوکی‌ها و localStorage و sessionStorage دقیقاً مثل یه آبجکت جاوااسکریپت رفتار می‌کنن. برای ذخیره مقدار، کافیه assign کنی؛ برای خواندن، فقط property رو بخونی؛ و برای حذف از کلیدواژه‌ی delete استفاده کنی:

import { cookies, local, db } from 'brownies';

cookies.token = 42;      // Set it
let t = cookies.token;   // Get it
delete cookies.token;    // Eat it

// db (IndexedDB) به صورت async کار می‌کنه
db.token = 42;
let val = await db.token;
delete db.token;

یکی از مشکلات رایج با localStorage اینه که همه چیز رو به صورت string ذخیره می‌کنه و موقع خواندن باید parse کنی. Brownies این مشکل رو حل کرده — نوع داده‌ها (عدد، boolean، آرایه، آبجکت) هنگام ذخیره و بازخوانی کاملاً حفظ می‌شن. کوکی‌ها هم زیر پوست ماجرا اول با JSON.stringify و بعد با encodeURIComponent encode می‌شن تا با استانداردهای RFC 6265 سازگار بمونن.

قابلیت جالب دیگه‌ی این کتابخونه، تابع subscribe هست که بهت اجازه می‌ده تغییرات یه کلید خاص رو واکنشی (reactive) دنبال کنی. هر بار که مقدار عوض بشه یا حذف بشه، callback اجرا می‌شه:

import { session, subscribe } from 'brownies';

subscribe(session, 'token', value => {
  console.log(value); // 42, 'Hello', null
});

session.token = 42;
session.token = 'Hello';
delete session.token;

یه ویژگی خوب دیگه اینه که می‌شه روی همه‌ی این آبجکت‌ها با متدهای استانداردی مثل Object.keys()، Object.values()، Object.entries() و حتی حلقه‌های for...in و for...of ایتریت کرد، درست مثل یه آبجکت معمولی.

برای کوکی‌ها، گزینه‌های پیکربندی مثل تاریخ انقضا، دامنه، path و HTTPS-only هم از طریق یه options symbol قابل تنظیم هستن. پیش‌فرض‌ها به گونه‌ای چیده شدن که برای اکثر پروژه‌ها کافی باشن (مثلاً انقضای ۱۰۰ روزه برای کوکی‌ها).

نکات کلیدی:

• کوکی، localStorage، sessionStorage و IndexedDB با یه سینتکس یکسان get/set/delete می‌شن
• نوع داده‌ها (عدد، boolean، آرایه، آبجکت) حفظ می‌شه و نیازی به parse دستی نیست
• تابع subscribe برای دنبال‌کردن تغییرات مقادیر به صورت reactive
• پشتیبانی کامل از Object.keys()، Object.values() و ایتریشن با حلقه
• db (که روی IndexedDB سوار می‌شه) async هست و خواندن از اون نیاز به await داره
• از نسخه ۲.۰ به بعد، مقادیر ذخیره‌شده با localStorage.getItem() مستقیم قابل خواندن نیستن و باید از local.KEY استفاده کرد