CookieとLocalStorageについて調べて比較した【JavaScript】

この記事は？

主な内容

• Cookieとは何か？
• LocalStorageとは何か？
• CookieとLocalStorageをJavaScriptで操作する方法
• CookieとLocalStorageの違いは何か？

Cookie

Cookieとは？

HTTP Cookie (ウェブ Cookie、ブラウザー Cookie) は、サーバーがユーザーのウェブブラウザーに送信する小さなデータであり、ブラウザーに保存され、その後のリクエストと共に同じサーバーへ返送されます。一般的には、 2 つのリクエストが同じブラウザーから送信されたものであるかを知るために使用されます。例えば、ユーザーのログイン状態を維持することができます。 Cookie は、ステートレスな HTTP プロトコルのためにステートフルな情報を記憶します。

＜HTTP Cookie の使用 / MDN Web Docsより＞

主に、サイトのログイン機能やユーザ設定の実現、ユーザの行動の記録および分析等で使用されているようです。

特徴

• keyとvalueのセットでデータを保存
• ブラウザ内に保存される
• 保存できるのは文字列のみ
  • 配列やオブジェクト等を保存・取得したい場合は、変換が必要
• 有効期限は任意に設定可能
• 保存容量は4KB
• サーバへのデータ通信はリクエスト毎に行われる

Cookieの確認方法

Cookieに格納されているデータは、下記の手順でブラウザから確認することができます。
開発者ツールを開く -> アプリケーション -> ストレージ -> Cookies
※Chromeの場合

Cookieの操作方法

JavaScriptでCookieを操作するには、Documentのcookieプロパティを使用します。

データを書き込む

• key=valueの形で書き込む
• 更新時も同様
• key=valueの後ろに;（セミコロン）で区切り、オプションを設定することが可能

  オプション（属性）	例 / 概要
  path=Cookieへアクセス可能なpath;	https://○○.com/hoge というURLであれば/hogeの部分
  domain=Cookie へアクセス可能なドメイン;	hoge.com、.hoge.com(全てのサブドメインを含む)、subdomain.hoge.com
  max-age=寿命（秒）;
  expires=日付（GMTタイムゾーン形式）;	Mon, 02 Feb 2023 09:15:37 GMT
  secure;	HTTPS通信の場合のみCookieを送信する
  httponly;	JavaScriptでのアクセスができないようにする
  samesite=右記のいずれか;	strict / lax / noneで、Cookieを送信するかどうかのコントロールをする
  sameparty;	サードパーティクッキーの制限を緩和する
  priority=右記のいずれか;	high / medium / lowで、保持優先度を設定する

 // keyがhogeでvalueがhoge
 document.cookie = "hoge=fuga";

 // hogeのvalueを更新
 document.cookie = "hoge=piyo";

 // オプションで有効期限を3600秒（1時間）後に設定
 document.cookie = "hoge=fuga; max-age=3600";

max-ageやexpiresで有効期限を設定しない場合は、ブラウザ（セッション）の終了が期限となります。

データを読み込む

• key=valueの文字列で読み込みができる
• 複数のCookieが設定されている場合は、すべてのCookieを各key=valueが;で区切られた状態で取得する
  • 個々のkeyとvalueを取得するためには、split()を使用して分割する必要がある

 // Cookieが3つ書き込まれている場合
 allCookies = document.cookie;
 allCookies; // 'hoge=fuga; piyo=hogehoge; fugafuga=piyopiyo;'

データを削除する

• Cookieを削除する方法は2つ
  • max-age（寿命）を0にする
  • expires（有効期限）を過去にする

  // 削除したいCookieのkeyがhoge
  document.cookie = "hoge=; max-age=0";
  document.cookie = "hoge=; expires=過去の日付";

ちなみに

js-cookieというJavaScriptAPIを使用することで、以下のように記述し、Cookieを操作できます。

 // 書き込み
 Cookies.set('hoge', 'fuga');

 // オプションexpires付きで書き込み（この場合、単位は日数）
 Cookies.set('hoge', 'fuga' {expires: 5});

 // 読み込み
 hoge = Cookies.get('hoge');
 hoge; // 'fuga'
 allCookies = Cookies.get();
 allCookies; // {hoge: 'fuga', piyo: 'hogehoge', fugafuga: 'piyopiyo'}

 // 削除
 Cookies.remove('hoge');

LocalStorage

LocalStorageとは？

Webページで取り扱うデータをWebブラウザの動作しているコンピュータの記憶装置に永続的に保存する仕組みの一つに「localStorage」がある。Webページ上で動作しているJavaScriptなどのプログラムが扱うデータをコンピュータ上の専用の保存領域に記録することができる。
<中略>
「Web Storage」と呼ばれる規格の一部として定義されており、同様の仕組みとして、一度のセッション（ページを開いてからブラウザやタブ、ウィンドウを閉じるまで）の間だけ有効な「sessionStorage」（セッションストレージ）もある。

＜ローカルストレージ【local storage】 / IT用語辞典 e-Wordsより＞

Web StorageというAPIの仕組みのうちの1つです。

特徴

• keyとvalueのセットでデータを保存
• ブラウザ内に保存される
• 保存できるのは文字列のみ
  • 配列やオブジェクト等を保存・取得したい場合は、変換が必要
• 有効期限は半永久的
• 保存容量は最低でも2MB（ブラウザによる）
• サーバへのデータ通信は行われない

LocalStorageのデータ確認方法

LocalStorageに格納されているデータは、下記の手順でブラウザから確認することができます。（Chromeの場合）
開発者ツールを開く -> アプリケーション -> ストレージ -> LocalStorage
※Chromeの場合

LocalStorageの操作方法

JavaScriptでLocalStorageを操作するには、WebストレージオブジェクトlocalStorageを使用します。

データを格納する

  // keyがhogeでvalueがhoge 
  localStorage.setItem('hoge', 'fuga');

  // hogeのvalueを更新
  localStorage.setItem('hoge', 'piyo');

データを取得する

取得したいデータのkeyを指定して取り出せます。

 localStorage.getItem('hoge'); // 'fuga'

データの数を取得する

key, valueのセットの数を取得できます。

  localStorage.length; // 1

n番目のkeyを取得する

indexは0から始まります。

  localStorage.key(0); // 'hoge'

データを削除する

 // 特定のデータを削除
 localStorage.removeItem('hoge');

 // （ドメイン内の）すべてのデータを削除
 localStorage.clear();

keyが存在するかチェックする

  localStorage.hasOwnProperty('hoge'); // true

ちなみに

以下のようにプロパティアクセスメソッドでのアクセスも可能です。
※ブラウザ毎に挙動が違うため推奨されていないようです。

  // 格納
  localStorage.hoge = 'fuga';
  localStorage['hoge'] = 'fuga';

  // 取得
  localStorage.hoge; // 'fuga'
  localStorage['hoge']; // 'fuga'

CookieとLocalStorageの違い

明確な違いを下記にまとめました。

	Cookie	LocalStorage
保存容量	4KB	2MB+
サーバへのデータ通信	リクエスト毎	行わない
期限	任意で設定可能	半永久的

個人的に感じた違い

• (js-cookieのことを抜きにすると）LocalStorageの方が直感的にデータの操作ができる
• データ操作の際のオプションは、Cookieには豊富だがLocalStorageには無い

まとめ・所感

CookieとLocalStorageについて調べてみました。
今回はそれぞれについて調べてまとめ、比較するだけになってしまったので、今後はそれぞれのメリットやデメリット等にも着目し、どのような場合にどちらを使うべきなのか自分で判断できるようになりたいと考えています。

参考文献まとめ

• Window.localStorage / MDN Web Docs
• Document.cookie / MDN Web Docs
• Web Storage API / MDN Web Docs
• HTTP Cookie の使用 / MDN Web Docs
• Storage.setItem() / MDN Web Docs
• Cookie / IT用語辞典 e-Words
• ローカルストレージ【local storage】 / IT用語辞典 e-Words
• LocalStorage, sessionStorage / Javascript.info
• Cookies(クッキー), document.cookie / Javascript.info
• 【JavaScriptの応用】Cookieの操作 / TCD
• JavaScriptでCookieのpath属性を設定する方法を現役エンジニアが解説【初心者向け】 / TechAcademy
• Cookieで指定可能な属性の種類と設定方法 / JavaDrive
• .cookie / jsSTUDIO
• Cookieの新しい属性、SameParty属性について / ASnoKaze blog
• CookieのPriority属性の仕様 / ASnoKaze blog
• Cookieに書きこまれたデータを読み込む (JavaScript プログラミング) / iPentec
• JavaScriptでcookieを削除する方法 / UX MILK
• js-cookieでクッキーを操作するサンプル / ITSakura
• JavaScript クッキー操作できるjs-cookie使ってみた / かもメモ