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 |
As you can seen main difference from above table. Here is the application of each storage type:
// 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=/";
reading cookie
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
Most comman storage type and all the functions are similar to the session type.
//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();
LinkedIn ? ❤
The above is the detailed content of LocalStorage VS SessionStorage VS Cookie. For more information, please follow other related articles on the PHP Chinese website!