localStorage

JavaScript

JavaScriptで使用できるLocalStorageについて学びます。

LocalStorageとは

ブラウザにデータを保存できる仕組みです。 公式ドキュメントはこちらです。

使い方

localStorageへデータを保存する

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

 localStorageへデータを保存する場合は上記のようにsetItem(key, value)を使用します。 keyに指定するのは一意の値となる文字列です。
データの修正やデータの削除の際に、この一意となる文字列を利用してデータの識別をします。
valueには保存する値を指定します。この時、valueには文字列や数値のほか、オブジェクトも保存することができます。 （ただし、オブジェクトの保存・取得は方法が少し異なります。（後述））

localStorageからデータを取得する

//例
localStorage.getItem('key');

保存したデータを取り出す場合は、setItem(key)を使用します。
keyには、保存する際に指定したkeyを使用します。
なお、指定したkeyに該当するデータが存在しない場合には、nullが返されます。

localStorageからデータを削除する

//例
localStorage.removeItem('key');

localStorageからデータを削除する場合はremoveItemを使用します。
保存されているデータと、指定したkeyが一致するデータを削除します。

オブジェクト（連想配列）のlocalStorageへの保存・取得について

前述したlocalStorageへの保存・取得方法は、文字列や数値ではうまくいきますが、オブジェクトに対しては想定と異なる結果となってしまいます。

//オブジェクトを用意
let person = {
  name = 'taro',
  age = 20
}
//localStorageへ保存？
localStorage.setItem('taro', person);
//データ取得
localStorage.getItem('taro'); //=> [object Object] になってしまう!

上記ではうまくいかないため、保存時と取得時に、JSON文字列化およびparseを行います。

//データ保存時
localStorage.setItem('taro', JSON.stringify(person));
//データ取得時
JSON.parse(localStorage.getItem('taro'));