kostumブログ

勉強したことやノート代わりのアウトプットに使っています。

Web Storage APIを知る①

Web Note

目的

結果

Web Storege API

  • Coookieを使用するよりも直感的な方法で、keyと値のペアを保存できる仕組み
  • Web Storageには以下の２つの仕組みがある。
    • sessionStorage
      • ページのセッション中（ページの読み込みや復元を含む、ブラウザーが開いている間）に使用可能な、オリジンに区切られた保存領域を管理する。
        • セッションデータのみ保管（ブラウザもしくはタブが閉じられるまで）
        • データはサーバーには送られない
        • Cookieよりも多く保管できる（最大5M）
    • localStorage
      • sessionStorageと同じだが、ブラウザを閉じたり、再度開いたりしても持続される
      • 有効期限がなく、Javascriptで消去したり、ブラウザキャッシュ／ローカルで保持されたデータをクリアすることで消去できる
      • 保存容量は３つの中で最大
  • これらの仕組みはWindow.sessionStorageやWindow.localStorageを通して使用でき、いずれかのプロパティを使用すると、Storageオブジェクトのインスタンスを生成して、データアイテムの保存、取り出し、削除ができる。
  • 同じオリジンに対して、sessionStorageとlocalStorageは、別のStorageオブジェクトを使用する。これらは別々に制御されてい機能する。
  • firefoxでは、ブラウザがクラッシュまたは再起動したとき、オリジンごとに保存されるデータ量は10MBに制限される。これは、Web Storageの使用量が多すぎて発生するメモリの問題を避けるため。
  • ユーザーがサードパーティーのCookieを禁止している場合、サードパーティーのiframeからWeb Storage にアクセスできない

Web Storage インターフェース

Storage
  • 特定のドメインおよびストレージの種類に対して、データの保存、取り出し、削除ができる
Window
StorageEvent
  • storageイベントは、保存領域が変更されたときにドキュメントのWindowオブジェクトで発生する。

プライベートブラウジング／シークレットモード

  • 多くのブラウザでは、プライベートブラウジングモード、シークレットモードがあり、履歴やcookieのようなデータを持たない。
  • これらは、根本的にWeb Storageとは互換性がない。
  • ほとんどのブラウザは、Storage APIを有効にして、見かけ上機能するようにしているが、保存したデータはブラウザを閉じると消去される。

  • 既存の保存済みデータをどうするかは、まだまだ議論中で、開発者はさまざまな実装を意識して、WebStorageAPIに依存するWebサイトを開発する際に考慮するべき。

    The WHATWG Blog

参考