ローカルストレージに値を保存する方法【React】

■はじめに

データの保持方法は色々とありますが、ここでは「ローカルストレージ」の使用方法を記載します。

■手順

ボタン押下時に、データの取得、設定、削除を行うサンプルの全量（App.js）

※確認は、「F12」を押して、コンソールを開いて確認してください。

import React from 'react';

class App extends React.Component{
  render()
  {
    function btnClick() {
      console.log("~~~~~データ設定前の値（null）~~~~~");
      console.log(localStorage.getItem('aaaa'));
      console.log("~~~~~データ設定~~~~~");
      localStorage.setItem('aaaa', 'サンプル');
      console.log("~~~~~データ設定後の値~~~~~");
      console.log(localStorage.getItem('aaaa'));
      console.log("~~~~~データ削除~~~~~");
      localStorage.removeItem('aaaa');
      console.log("~~~~~データ削除後の値（null）~~~~~");
      console.log(localStorage.getItem('aaaa'));
    }
    return (
      <div>
        <button onClick={btnClick}>ボタン</button>
      </div>
    );
  }
}

export default App;

データは以下の方法で設定できます。

localStorage.setItem('key', 'value');

データは以下の方法で取得できます。

localStorage.getItem('key');

データは以下の方法で削除できます。

localStorage.removeItem('aaaa');