ローカルストレージに値を保存する方法【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');

コメントを残す