Cookie、session、sessionStorage、localStorageの違いと適用シーン

フロントエンドの日常開発では、cookie、webStorageが一般的なブラウザキャッシュ方式です.しかし、同時にcookie、session、sessionStorage、localStorageとStringといえば、少し馬鹿なのではないでしょうか.本文はそれらの違いと応用シーンを整理して概括して、あなたの面接と実際の応用に対してすべて一定の助けがあると信じています.
cookie

は、サービス側によって生成する、クライアントに保存される(前後にインタラクションがあるため、セキュリティが悪い、帯域幅が浪費される)

.

ストレージサイズ限定(最大4 kb)

格納コンテンツは、 タイプの

のみを受け入れる.

保存場所:

期限が設定されていなければ に保存する、ブラウザが閉じた後に

を破棄する.

有効期限が設定されている場合は、有効期限が終了するまで(ブラウザをオフにしても)

に保存する.

データの操作が不便で、原生インタフェースが友好的ではなく、自分でパッケージする必要がある

適用シーン

は、ユーザがウェブサイトにログインするか否かを判断し、次回のログイン時に自動ログイン(またはパスワードを記憶)できるようにする

である.

登録時間、閲覧回数等の情報

を保存する.

有効期限が設定されているクッキーはどこにありますか?
Mac:/Users/ユーザー名/Library/caches/Google/Chrome/default/cache
Windows:C:Usersユーザー名AppDataLocalMicrosoftWindowsTemporary Internet Files
session

は、バックエンドが関心を持つコンテンツであり、cookie(sessionIDがcookieに保存されている)

に依存する.

はサービス側

に保存する.

ストレージサイズ無制限

は、任意の種類のストレージコンテンツ

をサポートする.

保存場所:サーバメモリ、アクセスが多いとサーバ性能に影響する

webStorage webStorageはhtml 5が提供するローカルストレージスキームであり、sessionStorageとlocalStorageの2つの方法を含む.cookieという従来のクライアントストレージ方式に比べて、webStorageには多くの利点がある.

はクライアントに保存する、サーバと通信しないため、cookieよりも安全で、速度が速い

である.

ストレージスペースは限られていますが、クッキーより大きい(5 MB)

は、String種類のストレージコンテンツ(クッキーと同様)

のみをサポートする.

html 5はオリジナルインタフェースを提供し、cookieよりデータ操作が便利である.

setItem(key, value)はデータを保存し、キー値ペアで情報を格納する.

getItem(key)データを取得し、キー値を入力すると、対応するvalue値が取得されます.

removeItem(key)単一データを削除し、キー値に基づいて対応する情報を除去する.

clear()すべてのデータを削除

key(index)インデックスを取得するkey

localStorage

永続化されたローカルストレージでは、ブラウザが閉じて再オープンしたデータは依然として存在します(手動でデータを削除しない限り).

アプリケーションシーン:長期ログイン、ユーザーがログインしているかどうかを判断し、ローカルに長期保存されているデータに適しています.

ストレージフォルダ:
Mac:/Users/ユーザー名/Library/APplication Support/Google/Chrome/default/LOcal Stroage
Windows:C:Usersユーザー名AppDataLocalGoogleChromeUser DataProfileLocal Storage
sessionStorage

ブラウザウィンドウが閉じた後、データが破棄されます.

アプリケーションシーン:機密アカウントを一度にログインします.

まとめ
以上より,cookieとwebStorage(localStorage,sessionStorage)はフロントエンドエンジニアが関心を持つコンテンツであり,sessionはバックエンドが関心を持つコンテンツであることが分かる.cookieは記憶量が小さく、安全性が悪く、データ操作インタフェースが友好的ではないが、webStorageは記憶量が大きく、安全性が高く、データインタフェースが友好的である.永続的な記憶方式にするには、localStorageを使用することを推奨します.使い捨てセッションの記憶には、sessionStorageを使用することを推奨します.
見終わったら収穫がありますか.好きならいいね応援してね~