Cách sử dụng LocalStorage một cách an toàn

Tuần trước, tôi đã bị gián đoạn bởi một thông báo cảnh báo lỗi sản xuất khi tôi đang tập trung viết mã. Tôi đã phải ngừng làm việc và để tìm hiểu những gì đã xảy ra.

lỗi là

chúng tôi không thể biết mã nào không hoạt động tốt từ vị trí mã cho các tệp javascript sản xuất đều được biên dịch và làm xấu đi.

Khi tìm kiếm sự cố, chúng tôi có thể phát hiện ra rằng trình duyệt không hỗ trợ localStorage. Giải pháp đơn giản nhất là bắt lỗi khi sử dụng localStorage:

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

Cách tốt hơn là cung cấp một tệp sử dụng để thực hiện:

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) {
      // 
    }
  }
}

Nếu localStorage không được hỗ trợ, chúng tôi có thể dự phòng để sử dụng bộ nhớ. Cách cuối cùng sẽ như thế này:

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();

Và sau đó kiểm tra mã này trong bảng điều khiển Chrome, nó hoạt động tốt:

Hy vọng bài viết này có thể giúp ích cho bạn, và rất mong được theo dõi tôi để học thêm nhiều kỹ năng.

Thêm nội dung tại PlainEnglish.io . Đăng ký nhận bản tin miễn phí hàng tuần của chúng tôi . Theo dõi chúng tôi trên Twitter , LinkedIn , YouTube và Discord . Quan tâm đến hacking tăng trưởng? Kiểm tra mạch .