Cookieとは違うの？『ローカルストレージ』の仕組みと使われ方を初心者向けに解説！

ネットショップで

商品をカートに入れたまま閉じたのに

次に開いた時もちゃんと残ってた！

ログインもしていないのに

情報が保存されている、

ちょっと不思議な現象です。

その裏側で動いているのが

『ローカルストレージ』

という仕組みなんです。

お疲れ様！じゅんです(^^)/

今回はWebサービスを使う上で

知っておきたい『ローカルストレージ』

について、初心者向けに

わかりやすく解説していきます。

Follow me ！～ ٩(๑òωó๑)۶

ローカルストレージって何？

ローカルストレージとは

ブラウザがあなたのパソコンやスマホの中に

直接データを保存できる仕組みのことです。

サイトを閉じても、パソコンを再起動しても

データはそのまま残り続けます。

先ほどのカート機能のほか

入力フォームの途中保存や

ダークモードの設定なども

この仕組みで実現されていることが

多いです。

サイト側からすると

「また来てくれた人に、

前回の続きを快適に体験してもらう」

ための便利な道具と言えますね。

Cookieとどう違うの？

似たような仕組みに

「Cookie」がありますが

役割は結構違います。

Cookieは基本的に

サーバーとやり取りするための

小さなデータで、

ログイン状態の維持などに使われます。

一方ローカルストレージは、

サーバーに送られることはなく

ブラウザの中だけで完結する

データ保存場所です。

保存できる容量もCookieより大きく

5MB前後まで扱えるのも特徴です。

つまり

「サーバーとやり取りする用」が

Cookie

「ブラウザの中だけで覚えておく用」が

ローカルストレージ

とイメージしておくと整理しやすいはずです。

副業ではどう関わってくる？

ブログやネットショップを運営していると

思った以上にこの仕組みの

お世話になっています。

訪問者の表示設定を覚えておいたり

フォームの入力内容を

一時保存したりする場面で

活用されているケースが多いです。

ツールやテンプレートを使っていれば

裏側で勝手に動いてくれているので

自分で実装する必要は基本ありません。

ただ

「なぜこの設定が保存されているのか」

を理解しておくと、

トラブル時の原因調査がスムーズになります。

知っておきたい注意点

便利な仕組みですが、

ひとつだけ気をつけたい

ポイントがあります。

ローカルストレージのデータは、

ブラウザのキャッシュやデータを消去すると

一緒に消えてしまうことです。

「設定したはずなのに消えた」という場合は

ブラウザ側のクリーンアップが

原因になっていることも多いので

慌てずに再設定すれば大丈夫です。

また、保存される情報は

そのブラウザ・その端末限定なので

別のスマホやPCに移っても

引き継がれない点も覚えておきましょう。

---

まとめ

最後に、

今回のポイントをまとめておきますね。

☑️ローカルストレージは

ブラウザ内にデータを保存する仕組み

☑️Cookieと違い、

サーバーには送信されない

☑️容量が大きく、

設定の保存などに使われている

☑️ブラウザのデータ消去で

内容が消えることがある

☑️端末やブラウザが変わると引き継がれない

普段は

意識しなくても動いている仕組みですが

知っておくと

「あれ、なんで消えたんだろう」

という場面で慌てずに対応できるはずです。

少しずつでも、

Webの裏側を理解していきましょう。

今日も

最後まで読んでくれてありがとう～！

では！また (*´▽｀*)