מחלקה פשוטה ב-JS לטפל בחוסר הודאות בקיום localstorage

[yossiz]

קיבלתי הרבה דיווחי שגיאות בקוד פרונטאנד מסויים בגלל מצבים שונים שבהם localstorage לא זמין, למשל בדפדפנים מסויימים במצב גלישה בסתר, או גירסאות מסויימות של דפדפנים למובייל וכדומה
אז כתבתי את המחלקה הזאת כמעטפה ל-localstorage
אשמח לקבל שיפורים

export class Storage {
  static #nullStorage = {
    getItem() {},
    setItem() {},
    removeItem() {}
  };

  static #cookieBasedStorage = {
    getItem(key, defaultValue) {
      // https://stackoverflow.com/a/64472572
      return Object.fromEntries(document.cookie.split('; ').map((v) => v.split(/=(.*)/s).map(decodeURIComponent)))[key] ?? defaultValue;
    },
    setItem(key, value) {
      document.cookie = `${key}=${value}`;
    },
    removeItem(key) {
      document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 UTC`;
    }
  };

  static #storage = this.#storageAvailable(localStorage)
    ? localStorage
    : this.#storageAvailable(this.#cookieBasedStorage)
    ? this.#cookieBasedStorage
    : this.#nullStorage;

  static #storageAvailable(storage) {
    // https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#Feature-detecting_localStorage
    try {
      const x = '__storage_test__';
      storage.setItem(x, x);
      storage.removeItem(x);
      return true;
    } catch (e) {
      return false;
    }
  }

  static getItem(key, defaultValue) {
    return this.#storage.getItem(key) ?? defaultValue;
  }

  static setItem(key, value) {
    this.#storage.setItem(key, value);
  }

  static removeItem(key) {
    this.#storage.removeItem(key);
  }
}

[אביחיל]

@yossiz כתב במחלקה פשוטה ב-JS לטפל בחוסר הודאות בקיום localstorage:

document.cookie = ${key}=${value};

המחלקה מטפלת ב localstorage או בכוכיז?

[צדיק תמים]

@אביחיל היא נופלת (fallback) לקוקיז במקרה שlocalstorage לא זמין

[שלום עולם 0]

@yossiz המחקלה מאפשרת רק תקשורת בסיסית עם localstorage דהיינו get, set, remove. אבל ל-localstorage יש גם מתודת ()clear ומאפיין length; אפשר לגשת ולשנות את רכיביו עם [localStorage[key או Object.hasOwnPropetry, אפשר לבצע עליו איטרציות(!) וכו'.

אם אתה רוצה לחקות באמת את localstorage, כנראה הפתרון הוא Proxy שלם שיושב על כל אפשרויות התקשורת עם localstorage ומספק תחליפים על בסיס coockie. ייתכן שעבור עבור חלק מהמקרים יהיה אפשר לרכב על ה-API הקיים sessionStorage אם הדפדפן מספק אותו.

כל זה לענ"ד וכתלמיד הדן בקרקע...

---

נ.ב. ייתכן שהיישום של ()localStorage.clear על המחלקה שלך מסוכן כי הוא עולל למחוק שורות מה-coockie שמנוהלים ע"י קוד אחר. לפתור את זה ידרוש מעקב על מה נוסף על ידי הקוד הנוכחי ומה לא.

[צדיק תמים]

@שלום-עולם-0 כתב במחלקה פשוטה ב-JS לטפל בחוסר הודאות בקיום localstorage:

@yossiz המחקלה מאפשרת רק תקשורת בסיסית עם localstorage. אבל ל-localstorage יש גם מאפיין length ואפשר לגשת ולשנות את רכיביו עם localStorage.key או Object.hasOwnPropetry, איטרציות(!) וכו'.

אני לא מצליח לראות תרחיש "בעולם האמיתי" שבו יש צורך באפשרויות האלה

[שלום עולם 0]

@צדיק-תמים כמובן הכל תלוי בגודל הפרויקט.
דוגמא לנחיצות איטרציה, היא כאשר העדפות המשתמש נשמרות ב-localStorage ואתה רוצה להעתיק את הנתונים משם לאובייקט שמכיל את ההגדרות.

[צדיק תמים]

@שלום-עולם-0 במקרה כזה עושים סריאליזציה לאובייקט ההגדרות עם JSON.stringify ושומרים אותו תחת key בשם settings

[שלום עולם 0]

@צדיק-תמים אני התכוונתי לכיוון ההפוך – חילוץ ההגדרות מ-localStorage, אבל אתה צודק שאם השמירה נעשתה עם key מיוחד אין בעיה.