📖

localStorageのvalue内のオブジェクトを更新する

2022/11/22に公開

概要

localStorageにオブジェクトを保存している場合で、すでに入っているオブジェクトの中身を一部更新する際の方法を備忘録的にまとめます

補足

今回のkeyとvalueは以下のような中身にし、valueのgift01.hasGotの値をtrueに更新するイメージです。

key value
uniqueKey campaign2022: {
gift01: {hasGot: false},
gift02: {hasGot: false}}

コード

let uniqueKeyObject;
let valueTitle = "campaign2022";

const addUniquekey = () => {
  let newUniqueKeyObject = {
    [valueTitle]: {
      gift01: { hasGot: true },
      gift02: { hasGot: false },
    },
  };
  localStorage.setItem("uniqueKey", JSON.stringify(newUniqueKeyObject));
};

const addValueToUniqueKey = () => {
  uniqueKeyObject[valueTitle] = {
    gift01: { hasGot: true },
    gift02: { hasGot: false },
  };

  localStorage.setItem("uniqueKey", JSON.stringify(uniqueKeyObject));
};

const checkLocalStorage = () => {
  const uniqueKeyRawContents = localStorage.getItem("uniqueKey");
  uniqueKeyObject = JSON.parse(uniqueKeyRawContents);

  // そもそも uniqueKey という key がまだない場合
  if (!localStorage.hasOwnProperty("uniqueKey")) {
    addUniquekey();
    return;
  }

  // uniqueKey はあるが valueTitle のついた value がない場合
  if (!uniqueKeyObject[valueTitle]) {
    addValueToUniqueKey();
    return;
  }

  // すでに valueTitle のついた value はあるが gift01 の内容がない場合
  if (
    !uniqueKeyObject[valueTitle].gift01 ||
    !uniqueKeyObject[valueTitle].gift01.hasGot
  ) {
    uniqueKeyObject[valueTitle].gift01 = {
      hasGot: true,
    };
    localStorage.setItem("uniqueKey", JSON.stringify(uniqueKeyObject));
  }
};

checkLocalStorage();

Discussion