©2024 Thoth Children All rights reserved.

Webクライアント側にデータ保存したい

ー 概要 ー

Webサイトを作るにあたってクライアント側にデータを持っておきたいことがあると思います.そのようなときにブラウザから提供される, cookie(クッキー),sessionStorage(セッションストレージ) ,localStorage(ローカルストレージ)を使用することができます.それぞれ保存期間や安全性、保存容量、誰が操作できるかが異なります.
Facebookシェア Twitterツイート LINEで送る このエントリーをはてなブックマークに追加
この章を学ぶ前に必要な知識
0
条件
  • Webブラウザ上でデータを保存する
効果
  • ブラウザにデータを保持できる
  • ユーザを識別する情報等を持てる
  • 通信量を減らしてユーザ側に大きなデータを置ける
ポイント
  • cookieは期限付き、sessionStorageはタブを閉じるまで、localStorageは消すまで永久
  • cookieはサイズが小さめ. localStorage sessionStorageは5Mほど.
  • cookieはSecureとhttpOnlyフラグをつければlocalStorageとsessionStorageと同等になる
  • localStorageやsessionStorageはブラウザやモードによってはサポートされていない.
  • 上記のためセッショントークン(ユーザ識別する情報)はcookieが多い
  • localStorageを編集できるのはブラウザだけ
  • どれもkeyとvalueの組み合わせでデータを保存

解 説

Webサイトのクライアント側にデータを保持させる方法は以下の3通りの方法があります. ・cookie 保持期間:期間指定. データ量は4Kbyteか指定した値.大きくはない. セキュリティはhttpOnlyフラグとsecureフラグをつければwebStorage同等. サーバ側がデータを読むためにおいておく.通信のたびにサーバへ送信. ・sessionStorage 保持期間:そのタブを開いている間. データ量は5Mbyteと大きい.サイトのURLと同一のところからきたJavaScriptのみデータ操作が可能.ブラウザ側しか操作できない. ・localStorage 保持期間:消すまで残る. データ量は5Mbyteと大きい.サイトのURLと同一のところからきたJavaScriptのみデータ操作が可能.ブラウザ側しか操作できない. 目的に応じて上記を使い分けます.
Webクライアント側にデータ保存したい
よく話題に上るのが 最も安全なデータ保存方法はどれか というのがあります.これが話題になるのは、ユーザを識別するためのセッショントークン(セッションクッキー, ユーザが誰か)をどこに保存するかに関係するからです. cookieはデフォルトではWebStorege(localStorage及びsessionStorage)よりセキュリティのレベルが低いですが、httpOnlyフラグ(気休め)とSecureフラグを立てることでWebStorage同等のセキュリティになると言われています. どの手法も安全性に万全とはいえませんが、それぞれそこまで大きな差はないそうです(cookieは要フラグ). webStorageが出てくるまでは全てcookieで保存していましたが、webStorageも選択肢にある今でもcookieを使うことが多いようです. それはwebStorageが使えないブラウザのモードがあったりするためで、 cookieならいつでも使用することができるので採用されるようです.
ユーザのセッショントークンについて
localStorage等はやはり扱えるデータサイズが大きいことが特徴なため、 通信で頻繁にサーバとやり取りをするのではなく、 適宜localStorageに保存したり引っ張り出したりして作業を行わせるときに使用します. cookieはサーバ側でSet-cookieとするだけですぐに付与できるのため大変便利です.
それぞれのほか使い道
この章を学んで新たに学べる
Comments

Reasons
>>隠す