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 サイトの他の関連記事を参照してください。