JavaScriptのLocalStorageを使用する正しい方法

It is to be noted that the LocalStorage starts empty and the items added during a private session get cleared as soon as the last private tab is closed.

LocalStorageの内部

Currently the Web Storage specification allows you to store up to 5MB per app per browser.

LocalStorageを使う方法？

データの書き込み

    localStorage.setItem('<key>', '<value>')

データの読み込み

  const value = localStorage.getItem('<key>')
  // value will be null or string

LocalStorage内のオブジェクトの保存

    // storing an object in LocalStorage
    const user = { name: 'anshuman_bhardwaj' }
    localStorage.setItem('user', JSON.stringify(user))

    // reading the object from LocalStorage
    const strinifiedUser = localStorage.getItem('user')
    if(strinifiedUser) {
      const retrivedUser = JSON.parse(strinifiedUser)
    }

データの削除

リモコン

    localStorage.removeItem('<key>')

クリア

    localStorage.clear()

The following pattern was suggested to me by my friend & colleague .

LocalStorage内の名前空間の作成と使用

ステップ1

ステップ2

ステップ3

This way we treat the namespace like it's own little LocalStorage.

const NAMESPACE = "DEV-007";

function writeToStorage(key, value) {
  const serializedData = localStorage.getItem(NAMESPACE);
  const data = serializedData ? JSON.parse(serializedData) : {};
  data[key] = value;
  localStorage.setItem(NAMESPACE, JSON.stringify(data));
}

function readFromStorage(key) {
  const serializedData = localStorage.getItem(NAMESPACE);
  const data = JSON.parse(serializedData);
  return data ? data[key] : undefined;
}

function clear() {
  localStorage.setItem(NAMESPACE, JSON.stringify({}));
}

function removeItem(key) {
  const serializedData = localStorage.getItem(NAMESPACE);
  const data = serializedData ? JSON.parse(serializedData) : {};
  delete data[key]
  localStorage.setItem(NAMESPACE, JSON.stringify(data));
}

Until next time