ユーザーの閲覧履歴やお気に入りなどのデータをブラウザに保存したい時、どのような方法で保存しているでしょうか。
Cookieを使うのかlocalStorageを使うのか、容量や有効期限の違いもあるので要件によって様々だと思います。
先日、CookieやlocalStorageについて改めて調べる機会があったので、備忘録を兼ねて近年のITPの動向を踏まえておさらいしておこうと思います。
ITPとは
ITPとはIntelligent Tracking Preventionの略で、Appleが定めている広告トラッキング防止機能のことです。
インテリジェントトラッキング防止とは...
オンラインショッピング中に見た商品が、突然あらゆるウェブサイト上に表示されるようになる。それは様々なウェブサイト上であなたに広告を見せるために、第三者がCookieやほかのウェブサイトデータを追跡している時に起こります。
とAppleの公式サイトで説明されている通り、ユーザー行動をトラッキングすることで実現するリターゲティング広告などからユーザーのプライバシーを守るための機能です。
2017年9月にITP1.0がAppleから発表されて以来、ITP1.1、ITP2.0、ITP2.1、ITP2.2、ITP2.3とアップデートされていき、その規制内容も徐々に強まっていきました。
ITPの対象となるのは、Apple社のSafariを利用しているユーザーになります。日本国内のモバイルのWEBブラウザのシェア率は、2021年10月時点でSafariがおよそ60%を占めているので無視することは難しそうです。
現在はITP2.3を基準に、CookieやlocalStorageの利用を検討する必要があります。
Cookie
Cookie（HTTP Cookie）は、webサーバとブラウザ間で情報をやり取りするための仕組みの一つで、ブラウザに情報が保存され、HTTPリクエスト時にヘッダ情報としてサーバに送信されます。
ログイン機能などのセッション管理や、ユーザーのパーソナライゼーション、ユーザー行動のトラッキングなどに広く用いられています。
Cookieを保存できる容量は4KBです。
Cookieはドメインに関連づけられますが、発行元の違いによって「1st party Cookie」と「3rd party Cookie」に分類されます。
関連づけられたドメインが閲覧しているページのドメインと同じ場合に1st Party Cookieと呼び、ドメインが異なる場合（発行元がそのサイトの管理者ではない場合）に、3rd Party Cookieと呼びます。
リターゲティング広告などのサイト越えトラッキングは、3rd Party Cookieを利用したもので、ITP2.3ではこの3rd Party Cookieを完全ブロックすることで、ユーザーのプライバシーを向上させています。
ITP2.1（IOS12.2以降）では、JavaScriptを用いて生成された1st party cookieが7日間で削除されるようになりました。
保存する情報が7日間で消えてしまっては困る場合、JavaScriptではなくサーバーサイドで発行したCookieを利用する必要があるので注意が必要です。
また、Cookieは後述のlocalStorage, sessionStorageと異なりHTML4にも対応しているため、古いブラウザなどでも利用することが出来ます。
localStorage（ローカルストレージ）
localStrageは、HTML5から導入されたテキスト情報をブラウザに保存する仕組みで、JavaScriptで保存します。
後述のsessionStorageと合わせてwebStorageとも呼ばれます。
// 値のセット
localStorage.setItem('key', 'value')
// 値の取り出し
localStorage.getItem('key')
// 削除
localStorage.removeItem('key')
// 初期化
localStorage.clear()
保存できる容量はブラウザによって異なりますが、大抵のブラウザで5MBほど保存することができます。Cookieの4KBと比較するとかなり大容量で、色々な情報をまるっと保存することが可能ですね。
ITP2.3では、localStorageも制限の対象になりました。
以下条件すべてを満たす場合に、localStorageは即時削除されます。
・トラッキングドメイン経由からの流入の場合
・URLにパラメータやフラグメントが付与されている場合
・サイト流入後にページで操作（クリック・タップ・テキスト入力）がない場合
上記を満たさない場合でも、サイトアクセス後7日間ユーザーの操作がない場合にlocalStorageは削除されます。
例えばよくあるユーザーの閲覧履歴やお気に入り機能ですが、localStorageに保存している場合はそのユーザーが7日間サイトにアクセスしなかった場合に情報が削除されてしまうので注意が必要です。
sessionStorage（セッションストレージ）
sessionStorageはlocalStorageと似たような機能で、容量も同様の5MBほど保存が可能です。
// 値のセット
sessionStorage.setItem('key', 'value')
// 値の取り出し
sessionStorage.getItem('key')
// 削除
sessionStorage.removeItem('key')
// 初期化
sessionStorage.clear()
localStorageとの違いですが、ライフサイクルの違いがあります。
localStorageはブラウザやタブを閉じても有効ですが、sessionStorageはブラウザやタブを閉じるとその時点で削除されます。
一定期間以上保持しておきたいデータの保存には使えませんが、ページ遷移時に次のページに情報を持っていきたい場合などに利用できそうです。
Cookieと違いHTTPリクエストヘッダに含まれないので、大きめのデータを保存してもパフォーマンスに影響が出る心配はありません。
まとめ
ブラウザにデータを保存する際にどの方法を使うのがいいかは、要件によって判断してうまく使い分ける必要があります。
例えば7日間ユーザーの操作がない場合に内容が削除されてしまってもいい場合は、容量の上限をあまり考えなくても良いlocalStorageを使うのが便利そうです。
それが許容できない（＝データを半永久的に保持したい）場合は、Cookieをサーバサイドで発行して利用することになりそうですが、容量が4KBしかないため多量の情報をブラウザに保存することができません。そのためサーバサイドのデータベースなどと組み合わせるなど、工夫が必要になります。
参考
https://www.apple.com/jp/privacy/features/
https://developer.mozilla.org/ja/docs/Web/HTTP/Cookies