JavaScriptでLocalStorageを扱う方法を解説！

どうも。夏バテ気味のみずかず(@mizukazu_1)です。
今作っているサイトでLocalStorageを使用する機会があったのでご紹介します。

LocalStorageの使用用途としてはお気に入り機能などのユーザーの情報を一時的に保存する為に使用します。
僕が作成しているサイトでもお気に入り機能を実装するために使用しています(作成途中)。

JavaScriptからLocalStorageのデータを取得する方法

使用するメソッド

localStorage.getItem('キー')

引数にはキーを指定してデータの取得を行います。

LocalStorage内ではデータはJson形式で保存されているので取得したらJavaScriptで扱えるように
オブジェクトの形式に変換する必要があります。

const json = localStorage.getItem('1');
const obj = JSON.parse(json);

obj[‘キー’]でアクセスすることでデータを取り出すことが可能です。

JavaScriptからLocalStorageにデータを保存する方法

使用するメソッド

localStorage.setItem('キー', '値');

第一引数にキー、第二引数に値を指定してデータを保存します。

LocalStorage内ではJson形式でデータが保存されるようなので、保存前にJson形式に変換してから保存する必要があります。

const obj = {
  '1': 'test',
  '2': 'sample'
};

const json = JSON.stringify(obj);

localStorage.setItem('1', json);

JavaScript上でオブジェクトを作成→それをJsonに変換→LocalStorageに保存。

具体的な使い方としてはこんな感じです。

LocalStorage内のデータを削除する方法

使用するメソッド

localStorage.removeItem('キー');

キーを指定してデータを削除する事が出来ます。

LocalStorage内を初期化する方法

使用するメソッド

localStorage.clear()

clearメソッドを使用してLocalStorage内に存在するデータを初期化することが出来ます。

最後に

今回はJavaScriptからLocalStorage内のデータを操作する方法をご紹介しました。

割と簡単にデータの取得や保存が行えるので是非活用してみてください。
Cookieよりもデータ量が多く有効期限も半永久なので便利に使用できると思います。