東京都新宿区のWeb制作会社 - ウェブラボ株式会社

クリエイターブログ

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

2018.06.26 Posted by

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はこちら

以上、技術メモでした。

オリエンシートダウンロード

採用サイト 絶対に外せない5つのチェックポイント

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278