【Web開発入門】localStorageとはなんぞや？Cookieとなにが違うんだい？ #JavaScript

背景

仕事であるデータの保持期間について教えてほしいとの調査依頼がきました。
そこで社会人1年目のペーペーの自分はlocalStorageというものを知ったのでまとめようと思います。

localStorageってなんぞや?

Web開発を行う上で、ユーザーのブラウザにデータを保存する方法として、localStorageというものがあります。localStorageは、HTMl5の一部として導入されたWebストレージAPIの一つで、ユーザーのコンピュータ上にデータを長期間保存することができる仕組みです。これにより、サーバーにデータを送ることなく、ローカル環境でデータを保持できます。

ユーザーのコンピュータ上にデータを長期間保存できる仕組み

ぐだぐだ書きましたがこんな感じの理解で大丈夫です。

どんなデータを保持できるのか

localStorageは、Webアプリケーションでデータをキーと値のペアとして保存します。
保存するデータは文字列の形式で保存されるので、オブジェクトや配列などの複雑なデータは直接保存はできないようです。

でもオブジェクトや配列を保存したい...

そんなときはJSON.stringify()を使いましょう。
JSON形式の文字列に変換してくれます。
逆にJSON形式の文字列からオブジェクトに戻したい場合はJSON.parse()を使えばOKです。

使用例↓

var user = {
  name: 'Alice',
  age: 25
};

var jsonString = JSON.stringify(user);
console.log(jsonString); // 出力: {"name":"Alice","age":25}
var jsonString = '{"name":"Alice","age":25}';
var userObject = JSON.parse(jsonString);
console.log(userObject); // 出力: { name: 'Alice', age: 25 }

Cookieとの違い

容量: localStorageはCookieよりもはるかに大きなデータを保存できます。
一般にlocalStorageは5MB程度まで、Cookieは約4KBまでです。
サーバーへの送信: Cookieは毎回のHTTPリクエストに含まれ、サーバーに送信されますが、localStorageのデータはクライアントサイドに留まり、サーバーには自動的には送信されません。
有効期限: Cookieには有効期限を設定できますが、localStorageのデータは明示的に削除するまで残ります。
インターフェース: localStorageはシンプルでモダンなAPIを提供しているため、データの取得と保存が容易です。

簡単な使用例

JavaScriptでlocalStorageの簡単な使用例を示します。

localStorageはWeb Storage APIの一部であり、ウェブブラウザのグローバルスコープに既に存在しているオブジェクトなので定義やインポートは不要です。

// データをlocalStorageに保存する
localStorage.setItem('myKey', 'myValue');

// データを取得する
var value = localStorage.getItem('myKey');
console.log(value); // 出力: myValue

// データを削除する
localStorage.removeItem('myKey');

使用するときの注意点

localStorageを使用する際の注意点です。

セキュリティ: localStorageは平文でデータを保存するため、重要な情報や個人情報は保存しないでください。めちゃくちゃ簡単に見れるので本当に気を付けましょう。
データの永続性: localStorageに保存されたデータは、意図的(ブラウザのキャッシュクリアやプログラム)にクリアしない限りほぼ永続的に残るので管理にも注意が必要です。
同期的: localStorageのAPIは同期的です。つまりlocalStorageへのデータの読み書きが行われるとき、その操作が完了するまで他のスクリプトがブロックされます。大量のデータを扱う際には注意が必要です。
ブラウザの互換性: ほとんどの現代のブラウザではlocalStorageがサポートされていますが、非常に古いブラウザでは使えないことがあります。
(ほぼ気にしなくていいです)

以下はブラウザと対応しているバージョンです。

Browser	Version
Chrome	4
Edge	12
Firefox	3.5
Opera	10.5
Safari	4
Chrome Android	18
Firefox for Android	4
Opera Android	11
Safari on iOS	3.2
Samsung Internet	1.0
WebView Android	37

↓参照元

おわりに

つたない文章でしたが、読んでいただきありがとうございました。
なにか間違っている点があれば、コメントでご指摘お願いします。

【Web開発入門】localStorageとはなんぞや？Cookieとなにが違うんだい？

背景

目次