localStorageを使用したデータの保存と読み取り

まず、localStorageにデータを保存する方法を見てみましょう。以下のコード例を使って、文字列データをlocalStorageに保存する方法を示します。

// データの保存
localStorage.setItem('key', 'value');

上記のコードでは、'key'というキーに対して'value'という値を保存しています。この値はブラウザが閉じられても永続的に保存されます。

次に、保存したデータを読み取る方法を見てみましょう。以下のコード例を使って、先ほど保存したデータを読み取る方法を示します。

// データの読み取り
const value = localStorage.getItem('key');
console.log(value); // 結果: 'value'

上記のコードでは、'key'というキーに対応する値をlocalStorageから取得し、その値をコンソールに出力しています。

また、localStorageからデータを削除する方法もあります。以下のコード例を使って、データの削除方法を示します。

// データの削除
localStorage.removeItem('key');

上記のコードでは、'key'というキーに対応するデータをlocalStorageから削除しています。

以上がlocalStorageを使用してデータを保存し、読み取る基本的な方法です。この方法を使うことで、ブラウザ上でデータを簡単に管理できます。さらに、localStorageには他にも便利な機能がありますので、詳細な使い方については公式のドキュメントを参照してください。