วิธีใช้ LocalStorage อย่างปลอดภัย

เมื่อสัปดาห์ที่แล้ว ฉันถูกขัดจังหวะด้วยข้อความเตือนข้อผิดพลาดในการผลิตเมื่อฉันจดจ่ออยู่กับการเขียนโค้ด ฉันต้องหยุดทำงานและค้นหาว่าเกิดอะไรขึ้น

ข้อผิดพลาดคือ

เราไม่สามารถรู้ได้ว่ารหัสใดทำงานได้ไม่ดีจากตำแหน่งรหัสสำหรับไฟล์จาวาสคริปต์การผลิตทั้งหมดจะถูกรวบรวมและ uglify

เมื่อค้นหาปัญหา เราพบว่าเบราว์เซอร์ไม่รองรับ localStorage ทางออกที่ง่ายที่สุดคือการตรวจจับข้อผิดพลาดขณะใช้ localStorage:

try {
  const data = localStroage.getItem(key)
} catch(e) {
  // if localStorage not support, fallback
}

วิธีที่ดีกว่าคือการจัดเตรียมไฟล์ util เพื่อให้สำเร็จ:

export const storage = {
  getItem(key, fallbackValue) {
    try {
      return localStorage.getItem(key);
    } catch(e) {
      return fallbackValue;
    }
  },
  setItem(key, value) {
    try {
      localStorage.setItem(key, value);
    } catch(e) {
      // 
    }
  }
  removeItem(key, value) {
    try {
      localStorage.removeItem(key, value);
    } catch(e) {
      // 
    }
  }
}

หากไม่รองรับ localStorage เราสามารถถอยกลับไปใช้หน่วยความจำได้ วิธีสุดท้ายจะเป็นดังนี้:

function isSupportLS() {
  try {
    localStorage.setItem('_ranger-test-key', 'hi')
    localStorage.getItem('_ranger-test-key')
    localStorage.removeItem('_ranger-test-key')
    return true
  } catch (e) {
    return false
  }
}

class Memory {
  constructor() {
    this.cache = {}
  }
  setItem(cacheKey, data) {
    this.cache[cacheKey] = data
  }
  getItem(cacheKey) {
    return this.cache[cacheKey]
  }
  removeItem(cacheKey) {
    this.cache[cacheKey] = undefined
  }
}
// if not support localStorage, fallback to memory
export const storage = isSupportLS() ? window.localStorage : new Memory();

จากนั้นทดสอบรหัสนี้ในคอนโซล Chrome ซึ่งทำงานได้ดี:

หวังว่าบทความนี้จะช่วยคุณได้ และหวังว่าจะติดตามฉันเพื่อเรียนรู้ทักษะเพิ่มเติม

เนื้อหาเพิ่มเติมที่PlainEnglish.io สมัครรับจดหมายข่าวรายสัปดาห์ฟรีของ เรา ติดตามเราได้ที่Twitter , LinkedIn , YouTubeและDiscord สนใจในการแฮ็กการเจริญเติบโตหรือไม่? ตรวจสอบวงจร