この記事は？

主な内容

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

参考文献まとめ