localStorage、sessionStorage、cookie的区别及用法封装
localStorage
localStorage 的生命周期是永久的,关闭页面或浏览器 localStorage 中的数据也不会消失。localStorage 除非主动删除数据,否则数据永远不会消失。
sessionStorage
sessionStorage 的生命周期是仅在当前会话下有效,关闭页面或浏览器 sessionStorage 中的数据会被销毁。
sessionStorage 引入了一个“浏览器窗口”的概念,sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。同时独立的打开同一个窗口同一个页面,sessionStorage 也是不一样的(不同浏览器、同一个页面也是不共享的)。
localStorage
与 sessionStorage
唯一的区别就是:
- localStorage 属于永久性存储
- sessionStorage 属于当会话结束的时候,sessionStorage 中的键值对会被清空
localStorage
与 sessionStorage
的缺点是:
- 浏览器的大小不统一,并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性。
- 目前所有的浏览器中都会把 localStorage 的值类型限定为
string类型
,这个在对我们日常比较常见的JSON对象类型需要一些转换。 - localStorage 在浏览器的隐私模式下面是不可读取的。
- localStorage 本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡。
- localStorage 不能被爬虫抓取到。
cookie
-
不设置过期时间(
cookie保存在内存里
):
则cookie生命周期为浏览器会话期间,只要关闭浏览器窗口,cookie就消失了
。
这种生命期为浏览会话期的cookie被称为会话cookie
。 -
设置了过期时间(
浏览器就会把cookie保存到硬盘上
):
则cookie生命周期为只在设置的cookie过期时间之前一直有效
。
关闭后再次打开浏览器,这些cookie依然有效直到超过设定的过期时间。
存储在硬盘上的cookie可以在不同的浏览器进程间共享,比如两个IE窗口。而对于保存在内存的cookie,不同的浏览器有不同的处理方式。
cookie 缺点:
cookie
存放数据大小为4K左右, 且有个数限制(各浏览器不同),一般不能超过20个。不能储存大数据且不易读取。
而localStorage
和sessionStorage
能存放5M或者更大。http请求
时需要发送到服务端,增加了请求的数据量
基本用法
localstorage 和 sessionstorage
if (window.localStorage) { // 判断浏览器是否支持
alert('浏览支持 localStorage');
// 储存数据 setItem
localStorage.setItem('key', 'value');
// 获取数据 getItem
localStorage.getItem('key');
// 删除数据 removeItem
localStorage.removeItem('key');
// 清除所有数据 clear
localStorage.clear();
} else {
alert('浏览暂不支持 localStorage');
}
原生接口可以接受,可以封装来对Object和Array有更好的支持。封装如下:
localStorage与sessionStorage的封装(可设置过期时间)
.
cookie
需要自己进行封装,原生的cookie接口不够友好。封装如下:
JavaScript设置cookie、读取cookie、删除cookie详解
本文作者:猫老板的豆
本文链接:https://www.cnblogs.com/bingcola/p/16499178.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步