ホームページ > ウェブフロントエンド > jsチュートリアル > LocalStorage VS SessionStorage VS Cookie

LocalStorage VS SessionStorage VS Cookie

Mary-Kate Olsen
リリース: 2024-11-13 01:07:02
オリジナル
1079 人が閲覧しました

LocalStorage VS SessionStorage VS Cookie

Cookies LocalStorage SessionStorage
Capacity 4kb 5-10 MBs (Browser Dependent) 5 MBs
Accessibility All windows All windows Private to tab
Expiration Manually Set Never expires On tab close
Passed in request Yes No No
Storage Browser and Server Browser Only Browser Only

応用

上の表から主な違いがわかるように。各ストレージ タイプのアプリケーションは次のとおりです:

  1. LocalStorage - 通常、データは期限切れになることはなく、ユーザー設定、アプリケーションの状態などの非機密データを保存する必要があります。
  2. SessionStorage - データはタブに対してプライベートであり、ウィンドウまたはタブを閉じるとすぐに期限切れになります。ユーザーが単一のタブを移動している間のみ保持する必要がある一時データ (送信前のフォーム データなど) を保存するのに適しています。
  3. Cookie - ストレージ容量は非常に少なく、認証トークンやユーザー設定などのデータがサーバーによって必要になる場合があります。

構文

クッキー?

// below snippet will set username as key ?
// Johndoe as value ?
// will set expiry date for the cookie which is 31 Dec 2024
// path (cookie available to entire website)
// if no path specified then cookie will be available to that particular site which created that cookie
// you can delete the cookie by setting? the date that already expired (any previous date)
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
ログイン後にコピー

クッキーを読んでいます

console.log(document.cookie) // Outputs all cookies? as a string
ログイン後にコピー

セッションストレージ?

sessionStorage.setItem('sessionData', 'temporaryValue');
let sessionData = sessionStorage.getItem('sessionData');
console.log(sessionData); // Outputs: temporaryValue
ログイン後にコピー

削除とクリア

sessionStorage.removeItem('sessionData'); // it will only remove particular key
sessionStorage.clear(); // clean the whole storage
ログイン後にコピー

ローカルストレージ?

ほとんどのコマンド ストレージ タイプとすべての関数はセッション タイプに似ています。

//set item
localStorage.setItem('username', 'JohnDoe');
// get itme
let username = localStorage.getItem('username');
console.log(username); // Outputs: JohnDoe
// remove item with key-value
localStorage.removeItem('username');
// reset store
localStorage.clear();
ログイン後にコピー

リンクトイン ? ❤

以上がLocalStorage VS SessionStorage VS Cookieの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート