ブラウザにデータを保存する方法

sumne

こんにちは、ウェブラボ技術メモです。

最近、Cookie以外でブラウザにデータを保存する方法がないか調べたところ、
便利なAPIを見つけたのでご紹介します。

localStorageとSessionStorage

localStorageとSessionStorageは、HTML5で新たに追加されたAPIです。
フロンエンドでブラウザにデータを保存することができるので、データベースとの連携が必要ありません。
下の表は、localStorageとSessionStorage、Cookieの特徴をそれぞれまとめました。

有効期限 データ量 通信
localStorage 半永久 5MB なし
sessionStorage ウィンドウ・タブを閉じるまで 5MB なし
Cookie 指定期限まで 4KB リクエストの都度発生する

また、ブラウザの対応状況や詳しい仕様は以下参考サイトをご覧ください。

詳しくはこちら

localStorageとSessionStorageの使い方

主な動作は

  • 保存
  • 取得
  • 削除
  • 初期化

に分類されます。それぞれ以下記述をすると実行されます。

localStorage SessionStorage
保存 localStorage.setItem(‘hogehoge’, ‘値’); sessionStorage.setItem(‘hogehoge’, ‘値’);
取得 localStorage.getItem(‘hogehoge’) sessionStorge.getItem(‘hogehoge’)
削除 localStorage.removeItem(‘hogehoge’) sessionStorge.removeItem(‘hogehoge’)
初期化 localStorage.clear() sessionStorage.clear()

保存したデータは、デベロッパーツールの「Application」→「Storage」の中のそれぞれ「LocalStorage」と「SessionStorage」を開くと値が入っているか確認できます。

複数のデータ(配列)を保存したい場合はJSONに変換すると扱うことができます。

使用例

localStorageの利用例としては、「最近閲覧した商品」のおすすめや、「お気に入り」、「メモ機能」などがあるそうです。また、SessionStorageの場合は、使い捨てデータの受け渡しに使えそうですね。

実際にlocalStorageとSessionStorageを使ったデモを作成しました。

DEMOはこちら

以上、技術メモでした。

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。