localStorage，sessionStorage 和 cookie区别

woyaoshengzhang

已于 2024-02-01 17:29:51 修改

阅读量425

点赞数 4

分类专栏：前端文章标签： js

于 2024-02-01 16:06:08 首次发布

本文链接：https://blog.csdn.net/woyaoshengzhang/article/details/135973297

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

                    
                    类型大小过期时间作用域设置值取值清除值
localStorage5M永久，关闭浏览器或页面不会消失，需要手动清除所有同源窗口共享window.localStorage.setItem('key','value')localStorage.getItem('key')localStorage.removeItem('key') localStorage.clear();
sessionStorage5M当前浏览器窗口关闭前有效不共享，仅当前窗口有效。即便不同窗口指向同一个页面也不共享window.sessionStorage.setItem('key','value') sessionStorage.getItem('key')sessionStorage.removeItem('key') sessionStorage.clear();
cookie4K设置的过期时间之前有效所有同源窗口共享将过期时间设置为60分钟后，控制台显示的过期时间早于系统时间8小时，UTC时间 + 8小时 = 北京时间 
 const now = new Date(); now.setMinutes(now.getMinutes()+60); document.cookie="name=zhangsan;expires=" + now.toUTCString(); document.cookie将过期时间设置为当前时间之前即可清除 
 const now = new Date(); now.setMinutes(now.getMinutes()-1); document.cookie="name=zhangsan;expires=" + now.toUTCString();

类型	大小	过期时间	作用域	设置值	取值	清除值
localStorage	5M	永久，关闭浏览器或页面不会消失，需要手动清除	所有同源窗口共享	`window.localStorage.setItem('key','value')`	`localStorage.getItem('key')`	`localStorage.removeItem('key') localStorage.clear();`
sessionStorage	5M	当前浏览器窗口关闭前有效	不共享，仅当前窗口有效。即便不同窗口指向同一个页面也不共享	`window.sessionStorage.setItem('key','value')`	`sessionStorage.getItem('key')`	`sessionStorage.removeItem('key') sessionStorage.clear();`
cookie	4K	设置的过期时间之前有效	所有同源窗口共享	将过期时间设置为60分钟后，控制台显示的过期时间早于系统时间8小时，UTC时间 + 8小时 = 北京时间 `const now = new Date(); now.setMinutes(now.getMinutes()+60); document.cookie="name=zhangsan;expires=" + now.toUTCString();`	`document.cookie`	将过期时间设置为当前时间之前即可清除 `const now = new Date(); now.setMinutes(now.getMinutes()-1); document.cookie="name=zhangsan;expires=" + now.toUTCString();`