LocalStorageでブラウザ内にデータを保存する

プログラミング

2019.06.18 2019.06.07

この記事は約5分で読めます。

Webサイトを作っていると、1度入力した値を一旦保存してほしいことがあると思います。
その情報をどこに保存しておくか、その選択肢の1つとしてLocalStorageを紹介します。

今回、LocalStorageを採用した理由としては、

実装が簡単
入力したデータを保存するためだけにDB等を準備するのはやりすぎ
消えてもそこまで問題が出る情報ではない
そのような情報のためにサーバーにリクエストを送るのは通信量がもったいない

などが挙げられます。

どれだけ簡単かというと

localStorage.setItem('name', 'Suzuki');

これで、name というキーに “Suzuki” というデータが保存されました！
LocalStorageの状態はGoogle Chrome のデベロッパーツールから確認できます。

データを取り出したいときは、

var name = localStorage.getItem("name");

で、変数 name に Suzuki が入ります。
なんて簡単なんでしょうか。

よしじゃあこれを使って実装を進めていくぞと行きたいところですが、そんな簡単な話にはなりませんでした。

では、今回やりたかったことに移ります。

←このデータの入力値を全て保存したかったのです（しかも3回分）

それぞれ、 localStorage.setItem(‘name’, ‘Suzuki’); のように保存していく…？
そんなこと大変です。
今後入力していくものが増えた時に毎回保存しないといけませんし、コードを追加し忘れたら保存されないものが出てきてしまう可能性があります。

そのため今回は入力値をinputDataという連想配列に全部まとめて1つの塊としてLocalStorageに保存しています。

inputData: {
      assetPrice : 1000, // 物件価格
      downRate: [
          {
              "start" : 0,
              "rate" : 100,
          },
      ], // 価格下落率
      firstPay : 0, // 頭金
      loan : [
          {
              "start" : 0,
              "rate" : 2.0,
          }
      ], // ローン（%）
      income : [
          {
              "start" : 0,
              "value" : 50000,
          },
      ], // 家賃
      payment : 0, 
      startTax : 100,
      regularTax : 10000,
      repairCost:[
          {
              "start" : 0,
              "value" : 1000,
          },
      ], // 修繕費
      occupyRate: 100, // 入居率（%）
      startMonth : "2019-07",
      payPeriod: 35,
      showPeriod: 50,
      isMonth: false,
      age : 35,
      additionPay : [
          {
              'month': 12,
              'value': 100000,
          },
      ]
  },

LocalStorageは、1つのkeyに1つの文字列しか入らない為、データを文字列に変換する必要があります。

const PAST_DATA_KEY = "pastData"

// JSON.stringufyを使って、JSON形式の文字列に変換
localStorage.setItem(PAST_DATA_KEY, JSON.stringify(this.inputData));

いい感じになりました。今回は更に「過去3回分まで保存」「保存時間」なども追加したかったので、同様に1つのデータとして保存します

こちらも同様に配列にまとめて最後に JSON.stringify で文字列に直してしまえば保存されます。

データを取得する際は、逆に

const PAST_DATA_KEY = "pastData"

let pastData = localStorage.getItem(PAST_DATA_KEY);
// JSON.parse を使って、JSON形式の文字列を元の配列に変換
saveData = JSON.parse(pastData);

で元のデータを扱えます。