記事ディレクトリ
クッキー
1. クッキーとは何ですか?
- Cookie 是一种在客户端存储数据的小型文本文件。
- Cookie 通常用于存储和返回与用户相关的信息。
2. Cookie の仕組み
- 服务器通过 HTTP 响应头将 Cookie 发送给客户端。
- 客户端在后续请求中通过 HTTP 请求头将 Cookie 发送回服务器。
- 服务器根据接收到的 Cookie 来获取用户相关信息或设置新的 Cookie。
3. Cookieのプロパティと機能
- 名称 (Name)：Cookie 的名称。
- 值 (Value)：与 Cookie 相关联的具体内容。
- 过期时间 (Expires)：Cookie 的有效期限。
- 域 (Domain)：可以访问 Cookie 的域名。
- 路径 (Path)：可以访问 Cookie 的路径。
- 安全标识 (Secure)：表示 Cookie 是否只在使用 SSL/TLS 加密协议时传输。
- HTTP-only 标识：表示 Cookie 是否只能通过 HTTP(S) 协议访问，而无法通过 JavaScript 等客户端脚本语言访问。
4. Cookieを使用するアプリケーションシナリオ
- 用户登录状态：通过存储用户登录信息，实现自动登录或保持登录状态。
- 个性化设置：根据用户喜好设置个性化选项或主题。
- 购物车功能：存储用户选择的商品信息，以便在结账时使用。
- 跨页面数据传递：在不同页面之间传递数据，实现状态的持久化。
実際のアプリケーションには、さらに詳細な機能や機能が含まれる場合があります。
ローカルストレージ
1.ローカルストレージとは何ですか
- localStorage 是 Web 浏览器提供的一种在客户端持久存储数据的机制。
- localStorage 允许开发者在用户浏览器中存储和获取数据，供后续访问和使用。
2. localStorageの特性と制限事項
- 容量限制：不同浏览器对 localStorage 的容量限制不同，通常在 5MB - 10MB 之间。
- 持久性：localStorage 中存储的数据在关闭浏览器或电脑后仍然存在，可以持久保存。
- 同源策略：localStorage 受到同源策略的限制，只能在相同的域名、协议和端口下进行访问。
- 存储格式：localStorage 只能存储字符串类型的数据，但可以通过 JSON.stringify 和 JSON.parse 方法将对象转换为字符串和反转换。
3. localStorageの使い方
- 设置数据：使用 localStorage.setItem 方法来存储数据，将键值对作为参数传入。
- 获取数据：使用 localStorage.getItem 方法来读取数据，传入键名即可获取对应的值。
- 删除数据：使用 localStorage.removeItem 方法根据键名删除特定数据，或使用 localStorage.clear 方法清空所有数据。
4. 利用シーンと注意事項
- 缓存数据：将频繁使用的数据存储在 localStorage 中，提高访问速度。
- 离线应用：利用 localStorage 存储应用的关键数据，使应用在离线状态下仍能正常运行。
- 数据共享：在同一域名下的不同页面之间共享数据，避免重复加载或传递数据。
- 安全性：由于 localStorage 存储的数据在客户端保存，需要注意敏感信息的存储和保护。
実際に使用する場合は、ブラウザの互換性やデータの保存方法なども考慮する必要があります。
セッションストレージ
1.セッションストレージとは
- sessionStorage 是 Web 浏览器提供的一种在客户端临时存储数据的机制。
- sessionStorage 允许开发者在用户浏览器中存储和获取数据，供同一窗口或标签页的后续访问和使用。
2. sessionStorage の機能と制限事項
- 会话级别持久性：sessionStorage 中存储的数据在当前会话期间有效，当用户关闭标签页或浏览器后，数据会被清除。
- 同源策略：sessionStorage 受到同源策略的限制，只能在相同的域名、协议和端口下进行访问。
- 存储格式：sessionStorage 只能存储字符串类型的数据，但可以通过 JSON.stringify 和 JSON.parse 方法将对象转换为字符串和反转换。
3. sessionStorageの使い方
- 设置数据：使用 sessionStorage.setItem 方法来存储数据，将键值对作为参数传入。
- 获取数据：使用 sessionStorage.getItem 方法来读取数据，传入键名即可获取对应的值。
- 删除数据：使用 sessionStorage.removeItem 方法根据键名删除特定数据，或使用 sessionStorage.clear 方法清空所有数据。
4. 利用シーンと注意事項
- 表单数据的临时保存：在多个表单页面之间临时存储用户输入的数据，以便用户返回时恢复数据。
- 会话数据共享：在同一窗口或标签页内共享数据，例如在不同页面间传递数据或共享登录状态。
- 敏感数据安全性：由于 sessionStorage 存储的数据在客户端保存，需要注意敏感信息的存储和保护。
実際に使用する場合は、ブラウザの対応状況やデータの保存方法などを考慮する必要があります。
比較した
| クッキー | ローカルストレージ | セッションストレージ | |
|---|---|---|---|
| ストレージ | 4KB | 5MB～10MB | 5MB～10MB |
| 保管期間 | 有効期限を設定できる | 完全に削除するか手動で削除する | 現在のセッション中に |
| 同一生成元ポリシー | 同一生成元ポリシーによる制限 | 同一生成元ポリシーによる制限 | 同一生成元ポリシーによる制限 |
| サーバーに送信するかどうか | はい | いいえ | いいえ |
| データの種類 | 文字列のみを保存できる | 文字列、数値、オブジェクトなどのデータ型を保存できます。 | 文字列、数値、オブジェクトなどのデータ型を保存できます。 |
| 相対的な安全性 | 中くらい | より高い | セッションレベルのセキュリティ |
| アクセス許可 | 同じドメイン名の下にあるすべてのページを表示および変更できます | 同じドメイン名の下にあるすべてのページを表示および変更できます | 同じウィンドウまたはタブ内で表示および変更可能 |
| 使用 | ユーザーセッション、認証などを追跡する | 永続データ、ローカルキャッシュなど。 | データの一時保存やフォームデータの復元など。 |
上の表は、いくつかの主要な属性と用途における Cookie、localStorage、sessionStorage の違いを比較しています。実際のニーズに基づいて、適切なストレージ メカニズムを選択する必要があります。