# ローカルストレージとクッキー（Cookie）の違いは？ローカルストレージはどこで確認できるの？

> こんにちは！ デジタルマーケター兼データサイエンティストの(@statistics1012)です！ デジマ業界で猛威をふ

- URL: https://toukei-lab.com/localstrage
- 公開: 2022.11.29 / 更新: 2024.11.21
- サイト: スタビジ（https://toukei-lab.com）

こんにちは！

デジタルマーケター兼データサイエンティストの([@statistics1012](https://twitter.com/statistics1012?lang=ja))です！

デジマ業界で猛威をふるっている**ITP**の問題。

そんなITPに対して、有効な対策手段と考えられているのが<mark>LocalStrage（ローカルストレージ）</mark>。

ただローカルストレージを用いた対応は後々<mark>さらなるITPのアップデートで規制されてしまう可能性が高い</mark>んですけどね！

※クロスサイトトラッキングに関してはローカルストレージも規制対象になりました。トホホ・・

<https://toukei-lab.com/itp2-3>

<mark>**ローカルストレージ**は**クッキー**と同じにみえて実はちょっと違う！</mark>

この記事では、そんなローカルストレージについて見ていきます。

:::talk{who="umatan"}
ローカルストレージとは何なのだろう？ローカルストレージとクッキーの違いはどこなんだろう？
:::

## ローカルストレージとは

![](/wp-content/uploads/2019/04/52ceff2ccf51b6465679ab4c976fc8b0_s.jpg)

ローカルストレージとは、端的に言うと「**情報をブラウザ上に保存しておく場所**」。

例えば、ユーザーがあるサービスにログインした場合、ログイン情報をローカルストレージ上に保存しておくことで、次回ユーザーが訪れた時に自動ログインが完了しているパターンなどが考えられます。

**ユーザーの情報等を半永久的にブラウザ上に入れておける箱**と考えてもらえばよいです。

HTMLのバージョン５である、HTML5からローカルストレージは登場しました。HTML５自体は2014年に登場し、今ではほぼ全てのブラウザに対応していますので、<mark>ローカルストレージもほぼ全てのブラウザ上で使用することが可能です。</mark>

## ローカルストレージとクッキーの違い

![](/wp-content/uploads/2019/05/PAK85_mediack20141206203720_TP_V-min-e1557650487118.jpg)

クッキーも同様にユーザーの情報を入れて置ける箱であり、ローカルストレージと概念的にはほぼ変わりません。

しかし実は、<mark>ローカルストレージはクッキーの後継的技術と言われていて、クッキーとは違う特徴があるんです。</mark>

### 容量が多い

クッキーは4KBの容量しか保存しておけないのに対して、<mark>ローカルストレージは5MBの容量を保存しておくことが可能です。</mark>

### 半永久的に保存

ローカルストレージは半永久的に保存されますが、クッキーは指定した期間の保存になります。

一般的に1年や2年という期間で保存されることが多いです。

ITPの影響でクッキーはファーストパーティクッキーが1日保存、サードパーティークッキーが保存されない、となっています。

ファーストパーティクッキーとサードパーティクッキーの違いは以下の記事をご覧ください。

<https://toukei-lab.com/thirdpartycookie-firstpartycookie>

### サーバーのデータ送信

クッキーの場合、HTTP通信の度に全てのクッキー情報をクライアント側からサーバー側に渡していました。

しかし、そうするとクッキー情報が多ければ多いほど重くなり、かつセキュリティ上も問題が発生する可能性が高いです。

ローカルストレージでは、<mark>必要なデータ利用時のデータ送信が行われます。</mark>

:::talk{who="umatan"}
クッキーにもデメリットしかないわけではなく、メリットの１つに幅広い互換性があるよ。ほぼすべてのブラウザやサーバー側でサポートされてるから古いシステムや環境でも利用可能なんだ！
:::

## ローカルストレージの確認方法

![](/wp-content/uploads/2019/03/a94310ed4de4a08528a026f0badfdb2f_s-e1556972696222.jpg)

それでは、ローカルストレージはどこで確認することができるのか見ていきましょう！

**クロームブラウザのディベロッパーツールから確認**することができます。

適当なページ上でCtrl＋Shift＋Iを押してみましょう！

そうすると以下のような画面が表示されるはず。

![](/wp-content/uploads/2019/05/Cookie.jpg)

タブのアプリケーションの押すと左側にローカルストレージやクッキーなどの表示が出てきます（赤で囲っているのはクッキー）

ちなみにこのクッキーやローカルストレージは自由に書き換えることが可能なんですよー！

## ローカルストレージへの書き込み方

ローカルストレージに<mark>データを書き込んだり、書き換えたり、削除したりするのは非常に簡単！</mark>

データを書き込みたい場合は以下の一行を記述しましょう！

:::box
`localStorage.setItem('key', 'value')`
:::

例えばディベロッパーツールのコンソール画面で以下のように書き込むと、ローカルストレージにちゃんとデータが入っているのが確認できます。

:::box
`
localStorage.setItem('name', 'ウマたん')`
:::

![](/wp-content/uploads/2019/06/localst.jpg)

データを取り出したい場合は、

:::box
`localStorage.getItem('key')`
:::

削除したい場合は、

:::box
`localStorage.removeItem('key')`
:::

:::talk{who="umatan"}
自分の手でやってみよう！
:::

## ローカルストレージ　まとめ

本記事では、**ローカルストレージ**について見てきました。

クッキーの後継としてITPの流れで注目されているローカルストレージ。

最後にローカルストレージのクッキーとの違いについてまとめておきましょう！

:::memo
**■容量が多い**\
**■半永久的に保存される**\
**■必要な時しかデータ送信しない**
:::

マーケティングやWebマーケティングについて学びたい方は以下の記事をチェックしてみてください！

<https://toukei-lab.com/marketing-study>

<https://toukei-lab.com/web-marketing-study>