JavaScriptでlocalStorageを使う

HTML JavaScript

JavaScriptでlocalStorageを使う方法を調べました。

localStorageとは

Window.localStorage - Web API | MDN

ブラウザにデータを保存させる機能。

  • 保存期間に制限が無い
  • セッションに似ている
    • セッションはブラウザを閉じたらデータは消去される
  • 保存領域はURL毎に異なる
    • 異なるURLの場合は異なるデータを保存する
  • データ容量は5MB
  • JSON形式で保存される

localStorageの機能とJavaScriptのメソッド

保存、取得、削除、初期化が行える。

  • 保存
    • localStorage.setItem('key', 'value');
  • 取得
    • localStorage.getItem('key');
  • 削除
    • localStorage.removeItem('key');
  • 初期化(全削除)
    • localStorage.clear();

その他のメソッド

  • 保存された数
    • localStorage.length;
  • n番目のkey取得
    • localStorage.key(n);

コンソールで使ってみる

ブラウザのコンソールで直接動かせる。

localStorage.length
> 0 //保存件数は0
localStorage.setItem('key', 'value');
> undefined
localStorage.length
> 1 //1件になってる
localStorage.getItem('key');
> 'value' //値が取得できた

jsファイルで保存する

jsファイルからLocalStrageに保存する場合は以下が必要

  • データをJSON形式に変換
    • JSON.stringify でJSON形式に変換
  • localStorage.setItem でデータ保存時は("key", "value") 形式でないとNG

例) data配列をキーdataでlocalStorageに保存する

const data = ["text1", "text2", "text3"];
const dataJSON = JSON.stringify(data);
localStorage.setItem("data", dataJSON);

感想

こんなに簡単にブラウザ上に値を保存できるとは驚きでした。 とりあえず基本の使い方はなんとなく分かったので色々使ってみて覚えていこうと思います。

参照

Window.localStorage - Web API | MDN